我在本地(桌面)html 页面上使用 jquery slider ,但遇到 slider 不显示的问题。
它应该看起来像我写的这个jsfiddle: http://jsfiddle.net/RwfFH/143/
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<span id="ColorScalerTitle">Color Scaling</span>
<div id="red">
<span id="redScale">1</span>
</div>
<div id="green">
<span id="greenScale">1</span>
</div>
<div id="blue">
<span id="blueScale">1</span>
</div>
JAVASCRIPT
$( function() {
function refreshValues() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" );
document.getElementById("redScale").innerHTML=red/100;
document.getElementById("greenScale").innerHTML=green/100;
document.getElementById("blueScale").innerHTML=blue/100;
}
$( "#red, #green, #blue" ).slider({
orientation: "horizontal",
range: "min",
max: 200,
value: 100,
slide: refreshValues,
change: refreshValues
});
$( "#red" ).slider( "value", 100 );
$( "#green" ).slider( "value", 100 );
$( "#blue" ).slider( "value", 100 );
});
CSS
#ColorScalerTitle{
float: left;
margin-left: 120px;
}
#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#redScale, #greenScale, #blueScale {
margin-left: 320px;
}
#red .ui-slider-range,
#red .ui-slider-handle
{ background: #FF0000; }
#green .ui-slider-range,
#green .ui-slider-handle
{ border-color: #00FF00; }
#blue .ui-slider-range,
#blue .ui-slider-handle
{ border-color: #0000FF; }
但是在我的本地代码(不使用 jsfiddle)上, slider 不显示。 slider 仍然有效,但显示不可见。我的问题可以在 jsfiddle 上重复,方法是单击 JAVASCRIPT 旁边的齿轮,取消选中 jQuery UI 1.9.2,然后重新运行(如下所示: http://jsfiddle.net/RwfFH/142/ )
我在我的 html 头中包含了 jquery.min.js
和 jquery-ui.min.js
,所以我不确定问题是什么。
这是否与 jQuery 未及时加载有关?我正在使用 window.addEventListener('DOMContentLoaded', main, false );
,其中 main 中有我的 slider 代码。
最佳答案
slider 小部件依赖于插件 CSS 表中定义的一些样式:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
(替换为合适的版本)
您的 fiddle 可以与 http://jsfiddle.net/7arrsaro/ 中链接的 .css 文件正常工作。
关于javascript - JQuery slider 不可见但可以工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39751581/