JQuery Slider不工作？ [英] JQuery Slider not Working?
问题描述
我正在尝试复制
尝试正确加载jQuery UI：
< link rel =stylesheet HREF = https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css >
< script src =https://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =https://code.jquery.com/ui/1.9.2/jquery-ui.js>< / script>
$（＃a_slider）。slider（{
orientation：horizontal，
range：false，
min：0，
max ：1，
值：0，
步骤：.01，
animate：true，
slide：function（event，ui）{
$（＃a_field ）.val（ui.value）;
$（＃a）。text（ui.value）;
}
}）;
I am trying to duplicate the slider found here.
I have a file index.php and the code is as follows:
Head:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
.top {
margin: 0px;
padding: 0px;
height: 500px;
width: 500px;
}
.testing {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 200px;
padding: 0px;
height: 100px;
width: 100px;
background: red;
border: 1px solid #000;
}
</style>
</head>
Body:
<body>
<div class="top">
<div class="testing"></div>
</div>
<p>a: <span id="a">0</span>
<div id="a_slider"></div>
</p>
</body>
JavaScript:
<script>
$("#a_slider").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 1,
value: 0,
step: .01,
animate: true,
slide: function (event, ui) {
$("#a_field").val(ui.value);
$("#a").text(ui.value);
}
});
</script>
But it is not working! I can only guess that the jqueryui link in the head is incorrect, but I'm pretty sure it's the same one as in the fiddle above.
IF you supply a fiddle in your solution, please use external resources so I can find the appropriate files. The simple class and ID names are purely for testing purposes.
Entire HTML:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
.top {
margin: 0px;
padding: 0px;
height: 500px;
width: 500px;
}
.testing {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 200px;
padding: 0px;
height: 100px;
width: 100px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="top">
<div class="testing"></div>
</div>
<p>a: <span id="a">0</span>
<div id="a_slider"></div>
</p>
</body>
<script>
$("#a_slider").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 1,
value: 0,
step: .01,
animate: true,
slide: function (event, ui) {
$("#a_field").val(ui.value);
$("#a").text(ui.value);
}
});
</script>
</html>
Thank you.
EDIT
I've tried using http://code.jquery.com/ui/1.10.4/jquery-ui.min.js, but also no dice. Below is a screen shot of what shows up...
Notice in the image that no slider shows up.
Here is the Working Fiddle
Try loading jQuery UI properly:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
$("#a_slider").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 1,
value: 0,
step: .01,
animate: true,
slide: function (event, ui) {
$("#a_field").val(ui.value);
$("#a").text(ui.value);
}
});
这篇关于JQuery Slider不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
