Question

尝试让简单的滑块工作......什么都没发生。我在JSFiddle（jquery 1.7.2，jQueryUI 1.8.1）中执行下面的代码，它可以工作..但是...在网页中......它没有。没有手柄的滑块非常简单。

我进入控制台并且没有（错误）消息......

帮助？

<!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/

Answer 1

只需在</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()脚本块

jQuery - 滑块无法正常工作

1 个答案: