JQuery Slider不工作？
[英]JQuery Slider not Working?
问题描述
I am trying to duplicate the slider found here . 
我想复制这里找到的滑块。
I have a file index.php and the code is as follows: 我有一个文件index.php ，代码如下：
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: 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. 我只能猜测头部的jqueryui链接是不正确的，但我很确定它与上面的小提琴相同。
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. 简单的类和ID名称纯粹用于测试目的。
Entire HTML: 整个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. 我尝试过使用http://code.jquery.com/ui/1.10.4/jquery-ui.min.js ，但也没有骰子。 Below is a screen shot of what shows up... 以下是显示内容的屏幕截图...
Notice in the image that no slider shows up. 请注意图像中没有滑块出现。
3 个解决方案
解决方案1
5 2014-01-30 21:19:13
You have to include the jQuery UI stylesheet too: 您还必须包含jQuery UI样式表：
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
Then it will work. 然后它会工作。
解决方案2
3 已采纳 2014-01-30 21:04:58
Here is the Working Fiddle 这是工作小提琴
Try loading jQuery UI properly: 尝试正确加载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,
value: 0,
step: .01,
animate: true,
slide: function (event, ui) {
$("#a_field").val(ui.value);
$("#a").text(ui.value);
}
});
解决方案3
0 2014-10-17 04:53:08
Just add the jQuery UI touch after jQuery ui: 只需在jQuery ui之后添加jQuery UI touch：
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.