1

このフィドルで機能する簡単な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のバージョンは重要ですか。

4

1 に答える 1

2

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'));
});
于 2012-06-21T18:15:05.110 に答える