Question

我正在尝试重现一个适用于这个小提琴的简单jquery滑块示例：http://jsfiddle.net/mericson/5TTm4/6/

这是我的代码：

<html>

    <head>
        <title>Jquery UI Slider</title>
        <link type="text/css" href="jquery-ui-1.8.20.custom.css"
        rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
        <script type="text/javascript">
            $("#slider").slider({
                value: 100,
                min: 0,
                max: 500,
                step: 50,
                slide: function (event, ui) {
                    $("#slider-value").html(ui.value);
                }
            });
            $("#slider-value").html($('#slider').slider('value'));
        </script>
        <style type="text/css">
            h1 {
                font-family: Helvetica, Arial;
                font-weight: bold;
                font-size: 18px;
            }
            body, p {
                font-family: Helvetica, Arial;
            }
        </style>
    </head>

    <body>
        <h1>HTML Slider Test</h1>
        <div id="slider"></div>
        <p>Your slider has a value of
            <span id="slider-value"></span>
        </p>
    </body>

</html>

我有images文件夹和以下文件

<link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>

在同一个文件夹中。我使用什么版本的jquery来使滑块工作是否重要？

Answer 1

将jQuery置于$(document).ready()处理程序中，如下所示：

$(document).ready(function(){
    $("#slider").slider({
        value: 100,
        min: 0,
        max: 500,
        step: 50,
        slide: function (event, ui) {
            $("#slider-value").html(ui.value);
        }
    });

    $("#slider-value").html($('#slider').slider('value'));
});

简单的jquery ui滑块不会工作

1 个答案: