如何在ASP.NET MVC 3中創建簡單的範圍滑塊？

Question

如何在不使用外部庫（如telerik或其他任何其他庫）的情況下在ASP.NET MVC 3中創建簡單範圍滑塊？

Answer 1

如果你是罰款jQuery用戶界面：

jQuery UI Slider

示例代碼：

<meta charset="utf-8"> 
    <style> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 
    <script> 
    $(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> 



<div class="demo"> 

<p> 
    <label for="amount">Maximum price:</label> 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</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 --> 

Answer 2

MVC使用JavaScript來在客戶端執行動態操作。使用圖像和JavaScript創建滑塊需要花費很多時間，並且一些開源庫已經完成了廣泛的研究。

Jquery和Jqueryui就是這樣一個開放源代碼的庫，*微軟每當在腳本文件夾中創建一個MVC項目時也會包含這些庫。檢查腳本文件夾在你的MVC項目，你可以看到類似jQueryUI的-1.8.11.js（版本可能會有所不同）

滑塊樣品與jQueryUI的：

http://jqueryui.com/demos/slider/

Answer 3

你可以拿通過Shield UI查看ASP.NET MVC Slider組件，這是在MVC視圖中輕鬆創建功能強大的滑塊的另一種方式。

剃刀代碼看起來是這樣的：

@(Html.ShieldSlider() 
     .Name("slider") 
     .Cls("slider") 
     .Min(0) 
     .Max(10) 
     .Value(4) 
     .Buttons(true) 
     .Ticks(ticks => ticks.Enabled(true)) 
     .Values(values => values.Template("{0:c}")) 
     .Tooltip(tooltip => tooltip.Enabled(true).Template("Price: <b>{0:c}</b>")))