JavaScript roundslider插件默認設置

我正在嘗試使用roundslider plugin。JavaScript roundslider插件默認設置

我按照說明找到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中沒有顯示任何內容。我哪裏做錯了？

jsfiddle示例由roundslider提供。

來源

2016-07-25 kayduh

'$（「＃slider1」）'是不是腳本加載時定義。將腳本包裝在'$（function（）{}）'包裝器中。 –

問題是腳本在加載HTML之前被調用。因此，$("#slider1")是未定義的，並且函數在沒有被調用的情況下被調用。

或者：

的<div>
包裹後移至你的腳本到<body>年底或某些地方的整個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" 
}); 
});//]]>

來源

2016-07-25 20:28:34

啊，這很有道理，謝謝你的澄清。我猜這兩個中的後者將是一個首選的解決方案？ – kayduh

@kayduh如果它對你有幫助，請將它標記爲已接受，向社區顯示它對你的幫助！ –

是的，@ kayduh，它更標準 –

JavaScript roundslider插件默認設置

回答

相關問題