简单的jquery UI滑块不起作用

我正在尝试重现一个简单的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>

我有图像文件夹，以及以下文件

<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来让滑块工作重要吗？

把你的 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'));
});

相关内容

最新更新

热门标签：