JavaScript 圆形滑块插件默认设置答案

【问题标题】：JavaScript roundslider plugin default settingsJavaScript 圆形滑块插件默认设置
【发布时间】：2016-07-25 20:23:15
【问题描述】：

我正在尝试使用roundslider plugin。

我按照here 的说明操作，包括依赖文件、添加 HTML 并调用插件。

我在以下简单的 .html 文件中创建了所有这些，并使用 chrome 打开它。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
        <script type="text/javascript">
            $("#slider1").roundSlider({
                sliderType: "default",
                value: 40
            });
        </script>
    </head>
    <body>
        <div id="slider1" class="rslider"></div>
    </body>
</html>

Chrome 打开了页面，但 div 中没有显示任何内容。我哪里做错了？

jsfiddleroundslider 提供的示例。

【问题讨论】：

$("#slider1") 在脚本加载时未定义。将脚本包装在 $(function() {}) 包装器中。

标签： javascript jquery html plugins

【解决方案1】：

问题是在加载 HTML 之前调用了脚本。因此，$("#slider1") 是未定义的，并且该函数不会被调用。

要么：

将脚本移动到<body> 的末尾或<div> 之后的某个位置

将整个 JS 代码包装在一个等待页面加载的 $(function() {}) 包装器中，如下所示：

$(function() {
    $("#slider1").roundSlider({
        sliderType: "default",
        value: 40
    });
});

JSFiddle 示例有效的原因是代码被包装在 window.load() 函数中，该函数等待 HTML 加载。（您可以在设置 JavaScript > 加载类型下看到此设置。

在内部，这是他们的脚本（您可以查看开发人员工具以在 JSFiddle 中查看）：

//<![CDATA[
$(window).load(function(){
$("#slider1").roundSlider({
    sliderType: "default",
    value: 40
});

$("#slider2").roundSlider({
    sliderType: "min-range",
    value: 40
});

$("#slider3").roundSlider({
    sliderType: "range",
    value: "10,40"
});
});//]]>

【讨论】：

啊，这是有道理的，谢谢你的澄清。我猜这两者中的后者将是首选解决方案？
是的，@kayduh，它更标准