gpt4 book ai didi

javascript - JQuery slider 不工作?

转载 作者:行者123 更新时间:2023-12-01 02:20:35 24 4
gpt4 key购买 nike

我正在尝试复制找到的 slider here .

我有一个文件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 链接不正确,但我很确定它与上面的 fiddle 中的链接相同。

如果您在解决方案中提供了 fiddle ,请使用外部资源,以便我可以找到适当的文件。简单的类和 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,但也没有骰子。下面是所显示内容的屏幕截图...

No Slider

请注意,图像中没有显示 slider 。

最佳答案

这是Working Fiddle

尝试正确加载 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);
}
});

关于javascript - JQuery slider 不工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21467239/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com