Question

我在javascript方面不擅长。但最近我被赋予了创建滑块的任务。我以为我可以使用dojo创建一个。当我进入jsp页面时，我看到在同一个jsp文件中已经使用了dojo，它看起来有点像这样。

 <script language="JavaScript" type="text/javascript" src="js/dojo/dojo-release-1.3.1/dojo/dojo.js" djConfig="parseOnLoad: true, locale: '<%=request.getLocale().getLanguage()%>'"></script>

和

    window.onload = function() {
        dojo.require("dojo.number");
    };

我不知道这意味着什么。

我的问题是如何使用此版本的dojo创建一个已在文件中使用的滑块。任何参考链接，如果高度赞赏。

此外，web prject具有以下dojo库结构（请参阅SnapShot） enter image description here 。

Answer 1

由于我已经有了这个jsfiddle，我将假设我的评论答案是肯定的:-)尝试以下方法。在window.onload函数中添加更多行：

window.onload = function() {
    dojo.require("dojo.number");

    dojo.require("dijit.form.HorizontalSlider");
    dojo.require("dijit.form.HorizontalRule");
    dojo.require("dijit.form.HorizontalRuleLabels");


    dojo.addOnLoad(function() {
        dojo.parser.parse()
    });
}

dojo.require调用告诉Dojo从服务器加载更多javascript。由于我们想制作一个滑块，Dojo需要滑块的javascript文件。

dojo.addOnLoad调用告诉Dojo向其onLoad事件添加一个函数。我们已经在window.onload内，但由于我们从服务器加载更多javascript，我们必须使用Dojo自己的onLoad事件来等待加载新脚本。

我们想要在Dojo的onLoad事件中调用的函数是dojo.parser.parse。此函数扫描您的HTML，如果它检测到任何Dojo标记，它会将其转换为漂亮的小部件（例如滑块）。这意味着我们需要在HTML中使用一些Dojo标记，因此请将以下内容添加到您希望显示滑块的HTML中。

<div dojoType="dijit.form.HorizontalSlider" maximum="100" minimum="0"
    style="width:250px" id="slider1" name="slider1">
        <div dojoType="dijit.form.HorizontalRule" style="height: 4px" count="10"></div>
        <div dojoType="dijit.form.HorizontalRuleLabels" count="5"></div>
</div>

Dojo的解析器将用一个漂亮的滑块替换它，还有一件事我们必须做 - 确保我们加载了正确的CSS。我们想要的文件名为“tundra.css”（实际上，您可以使用其他样式，但苔原非常好）。在CSS中添加导入，或者用于exaple

<link rel="stylesheet" href="js/dojo/dojo-release-1.3.1/dijit/themes/tundra/tundra.css">

要确保将苔原风格应用于滑块，请将class="tundra"添加到您的身体标记。

希望这会有所帮助。请查看此链接以获取更多线索和想法：http://archive.dojotoolkit.org/dojo-2010-05-01/dojotoolkit/dijit/tests/form/test_Slider.html（这不是真正的1.3.1，但它应该类似）。

我如何创建一个dojo滑块

1 个答案: