爲什麼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滑塊不能正常工作？

回答

相關問題