简单的jQuery UI的滑块不会工作

我想重现这一小提琴作品一个简单的jQuery滑块例如：http://jsfiddle.net/mericson/5TTm4/6/简单的jQuery UI的滑块不会工作

这里是我的代码：

<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的版本有滑块的工作？

来源

2012-06-21 Gandalf

把你的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-21 18:15:05

简单的jQuery UI的滑块不会工作

回答

相关问题