2

単純なスライダーを機能させようとしています...何も起こりません。以下のJSFiddle（jquery 1.7.2、jQueryUI 1.8.1）でこのコードを実行すると、機能しますが、Webページでは機能しません。ハンドルのないシンプルなスライダーです。

コンソールに入りますが、（エラー）メッセージはありません...

ヘルプ？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <title>Sin título 1</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $( ".slider" ).slider({
           animate: true,
               range: "min",
               value: 50,
               min: 0,
               max: 100,
               step: 1,
               slide: function( event, ui ) {
                   $("#slider-result").html( ui.value );
               }
               });</script>

<style type="text/css">
<!--
body{
background: #CECECE !important;
padding:10px;
}

/*the slider background*/
.slider {
width:230px;
height:10px;
background: #737373;
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:16px;
height:16px;
position:absolute;
top:-3px;
margin-left:-12px;
z-index:200;
background:#404040;
    outline:none;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:#ABABAB;
height:8px;
left:1px;
top:1px;
position:absolute;
}
​
-->
</style>

</head>

<body>

<div class="slider"></div>
<div id="slider-result">50</div>

</body>
</html>

これが明らかに機能するフィドルです。http://jsfiddle.net/D45mp/

4

1 に答える 1

3

</body></html>もちろん、このように、ドキュメントの最後にスクリプトを追加するだけです

<html>
<body>
 // Divs spans and other stuff

    <script type="text/javascript">
            $(".slider").slider({
                animate: true,
                range: "min",
                value: 50,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    $("#slider-result").html(ui.value);
                }
            });</script>
</body>
</html>

または

document.ready()それをスクリプトブロック内に記述します

于 2012-08-10T05:57:48.247 に答える