为什么jQuery UI滑块不能正常工作？

的Html

<div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="@ViewData.Model" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description -->

样式

#demo-frame > div.demo { 
    padding: 10px !important; 
};

脚本

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 37, 
     min: 1, 
     max: 700, 
     slide: function (event, ui) { 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range-min").slider("value")); 
});

全HTML源

<!DOCTYPE html> 
<html> 
<head> 
    <link href="/Content/Stylesheet/Site.css" rel="stylesheet" type="text/css" /> 

    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.all.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.theme.css" type="text/css" media="all" /> 


    <script src="/Content/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery-ui-i18n.min.js" type="text/javascript"></script> 

    <link href="favicon.ico" rel="icon" /> 

</head> 
<body> 

     <div class="editor-field"> 
      <div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="50" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description --> 



<style type="text/css"> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider-range-min").slider({ 
      range: "min", 
      value: 37, 
      min: 1, 
      max: 700, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider-range-min").slider("value")); 
    }); 
</script> 

      <span class="field-validation-valid" data-valmsg-for="Discount" data-valmsg-replace="true"></span> 
     </div> 
</body> 
</html>

来源

2012-06-23 Mediator

您可能错过了一些CSS ..你确定你已经下载了所有的CSS并且你正在使用本地内容吗？浏览器控制台中出现错误 – AvkashChauhan

？它看起来像你使用下载演示，最好的猜测是路径问题的JS或CSS。查看控制台'Net'或'Network'选项卡检查所有正在加载的资源的状态 – charlietfl

是的，AvkashChauhan是对的，你在你的包含中缺少一些东西，这里是你在jsbin [link]（http：// jsbin。 com/ixenew），它工作正常。 – Ravi

检查路径和CSS代码

#demo-frame > div.demo { 
padding: 10px !important; 
} 
//instead of 

#demo-frame > div.demo { 
padding: 10px !important; 
};

的结尾处，删除分号，我认为它会工作。

来源

2012-06-23 17:24:20 Medona

它没有什么不同，因为问题是'div'没有高度，因此保持不可见并且不能被点击。（无论如何，在Chrome中使用jsFiddle） - 请参阅：http://jsfiddle.net/yeScN/1/ – Nope

你是对的......但是如果包含足够的两个文件，则没有必要明确定义填充和颜色。 – Medona

1.themes/basejquery.ui.all.css 2.jquery-ui-1.8.21-min.js我正在研究最新的jQuery UI版本1.8.21 – Medona

为什么jQuery UI滑块不能正常工作？

回答

相关问题