简体   繁体   English

使用Dojo SpinWheel

[英]Using Dojo SpinWheel

I am creating an app and would like to use the SpinWheel widget from Dojo. 我正在创建一个应用程序,并希望使用Dojo中的SpinWheel小部件。

Currently, all I am trying to do is get the working example of the SpinWheel Widget from the site, http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4 , functioning 当前,我要做的就是从站点http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4上获取 SpinWheel Widget的工作示例。

Unfortunately, I cannot seem to do this. 不幸的是,我似乎无法做到这一点。

I have tried: 我努力了:

Using the declarative code from the example online. 在线使用示例中的声明性代码。 I pulled both the dojo and dojox repos from github, and know that they are in the correct locations because the Hello Dojo tutorial worked perfectly with my paths. 我从github上提取了dojo和dojox仓库,并且知道它们在正确的位置,因为Hello Dojo教程与我的路径完美配合。 Code (mostly copied from site in bold above) is below. 代码(大部分是从网站上以粗体显示的代码)在下面。

What happens: None of the Dojo code works. 会发生什么:Dojo代码都不起作用。 The title shows up, as does the ".", but nothing else. 标题显示,“。”显示,但没有其他显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo SpinWheel</title>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>
</script>
<script>
    require([
        "dojox/mobile/parser",
        "dojox/mobile/SpinWheel"
    ]);
</script>
</head>

<body>
  <div id="view1" data-dojo-type="dojox/mobile/View">
    <h1 data-dojo-type="dojox/mobile/Heading">Custom SpinWheel</h1>
    <div id="spin1" data-dojo-type="dojox/mobile/SpinWheel">
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labels="['A','B','C','D','E','F','G','H','I','J','K']"
         style="text-align:center;width:40px;"></div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labelFrom="3000" labelTo="3100"
         style="width:70px;"></div>
     <div id="pt" class="mblSpinWheelSlot"></div>
     <div id="txt" class="mblSpinWheelSlot">.</div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labelFrom="0" labelTo="9"
         style="width:30px;"></div>
     <div data-dojo-type="dojox/mobile/SpinWheelSlot"
         labels="['pt','px','cm']"
         style="width:50px;"></div>
    </div>
    </div>
</body>
</html>

Your example can't work, because: 您的示例无法正常工作,因为:

  1. You don't call parser.parse() 您不调用parser.parse()
  2. You don't require all modules used by declarative syntax 您不需要声明式语法使用的所有模块
  3. You don't load mobile theme 您不加载手机主题

Assuming that DOJO is unpacked in the root of your htdocs of your Apache, the working head of your HTML file should look like that: 假设DOJO在Apache htdocs的根目录中解压缩,则HTML文件的工作头应如下所示:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Dojo SpinWheel</title>
    <!-- load Dojo -->
    <script src="/dojox/mobile/deviceTheme.js"></script>
    <script src="/dojo/dojo.js" data-dojo-config="async: true"></script>
  <script type="text/javascript">
    require([
        "dojox/mobile/parser",
        "dojox/mobile/SpinWheel", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/SpinWheelSlot"
    ], function(parser) {
       parser.parse();
    });
  </script>
</head>

See also the examples under dojox/mobile/tests . 另请参见dojox/mobile/tests下的示例。 They usually do work, contrary to many examples from Dojo online docs :( 它们通常可以工作,这与Dojo在线文档中的许多示例相反:(

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM