JQuery Slider不工作？
Bir*_*rel 2 javascript jquery jquery-ui jquery-slider
我想复制这里找到的滑块.
我有一个文件index.php,代码如下:
头:
<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>
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>
但它不起作用!我只能猜测jqueryui头部的链接是不正确的,但我很确定它和上面的小提琴一样.
如果您在解决方案中提供了一个小提琴,请使用外部资源,以便找到相应的文件.简单的类和ID名称纯粹用于测试目的.
整个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>
谢谢.
编辑
我尝试过使用过http://code.jquery.com/ui/1.10.4/jquery-ui.min.js,但也没有骰子.以下是显示内容的屏幕截图...
请注意图像中没有滑块出现.
这是工作小提琴
尝试正确加载 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);
}
});
- 知道了！您的链接需要在 `//` 之前包含 `https:`，否则它可以正常工作。修改你的答案，我会给你接受。 (2认同)
您还必须包含jQuery UI样式表:
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
然后它会工作.
| 归档时间： |
|
| 查看次数： |
20814 次 |
| 最近记录： |