jQuery - 滑块不工作

试图让一个简单的滑块工作...没有任何事情正在发生。我在JSFiddle（jQuery 1.7.2，jQueryUI 1.8.1）下面执行下面的代码，它可以工作..但是...在网页中..它没有。没有手柄的滑块很简单。jQuery - 滑块不工作

我去到控制台，并没有（错误）消息...

帮助？

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

来源

2012-08-10 nn2

能不能因为你是缺少document.ready函数 – freebird 2012-08-10 05:57:34

就在该文件的过程中</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-10 05:57:48 yogi

为什么脚本标签要进入内部，不应该在头部内部？ – freebird 2012-08-10 06:01:40

现在向我解释为什么工作......请......我不知道为什么。 :-) – nn2 2012-08-10 06:03:14

使脚本在元素渲染之前执行，这就是为什么我们需要document.ready的原因。并有一篇文章关于不把脚本放在头部因为它会减慢你=）） – 2012-08-10 06:03:41

jQuery - 滑块不工作

回答

相关问题