Question

我正在尝试复制找到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链接是不正确的，但我很确定它与上面的小提琴中的链接相同。

IF 您在解决方案中提供了一个小提琴，请使用外部资源，以便找到合适的文件。简单的类和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

请注意图像中没有滑块显示。

Answer 1

您还必须包含jQuery UI样式表：

<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">

然后它会起作用。

Answer 2

以下是 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);
        }
    });

Answer 3

在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>

JQuery Slider不工作？

3 个答案: