實例幫助你了解HTML5滑動區域選擇元素Sliderelement

來源：懂視網責編：小采時間：2020-11-27 15:16:23

實例幫助你了解HTML5滑動區域選擇元素Sliderelement

實例幫助你了解HTML5滑動區域選擇元素Sliderelement:HTML5的出現帶給我們了很多新的標簽和元素。其中一個就是區間選擇輸入元素，例如，選擇10以內的一個數字。這個元素其實在很多系統操作系統中都存在了很長時間，但是現在只是如何將他們整合到瀏覽器中。因為使用JS可以很方便的模擬出這個效果所以HTML中一

推薦度：

點擊下載本文 文檔為doc格式

導讀實例幫助你了解HTML5滑動區域選擇元素Sliderelement:HTML5的出現帶給我們了很多新的標簽和元素。其中一個就是區間選擇輸入元素，例如，選擇10以內的一個數字。這個元素其實在很多系統操作系統中都存在了很長時間，但是現在只是如何將他們整合到瀏覽器中。因為使用JS可以很方便的模擬出這個效果所以HTML中一

HTML5的出現帶給我們了很多新的標簽和元素。其中一個就是區間選擇輸入元素，例如，選擇10以內的一個數字。這個元素其實在很多系統操作系統中都存在了很長時間，但是現在只是如何將他們整合到瀏覽器中。
因為使用JS可以很方便的模擬出這個效果所以HTML中一直沒有可以直接使用的滑動選擇元素。jQuery UI類庫包含了一個非常不錯的版本可以很容易進行樣式設置。但是整合到瀏覽器中將非常簡單，支持對于支持它的瀏覽器來說。

瀏覽器支持
除了著名的Firefox外所有的現代瀏覽器都支持這個元素，但是很容易使用html5slider.js來創建。當然IE也不支持區域選擇輸入，這個修改不太容易。這樣的話，意味著你需要使用分開的類庫類似jQuery UI來支持多瀏覽器。好消息在于如果瀏覽器不支持區域選擇的話，它會做為一個輸入框顯示。

如何工作的？
區域選擇輸入元素使用輸入框類似的標簽，支持一般的數值屬性，及其min和max，用來限制區域，step用來設置滑動中數值增量。缺省為1。

你可以使用JS/jQuery來修改這些屬性，也可以使用onchange事件來監聽變化。代碼如下：

<input id="defaultSlider" type="range" min="0" max="500" />
<p class="note">Current value: <span id="currentValue">0</span></p>

或者

$(function(){
 var currentValue = $('#currentValue');
 $('#defaultSlider').change(function(){
 currentValue.html(this.value);
 });
 // Trigger the event on load, so
 // the value field is populated:
 $('#defaultSlider').change();
});

當然這些代碼需要瀏覽器支持。否則你只能看到一個輸入框。
當然2/3的瀏覽器都看不到我們這個區域選擇輸入，我們需要想想別的方法。我們先快速使用jQueryUI來實現一個滑動選擇器。

<p id="slider"></p>
<p class="note">Current value: <span id="currentValue">0</span></p>

你可以看到代碼如下：

$(function(){
 var currentValue = $('#currentValue');
 $("#slider").slider({
 max: 500,
 min: 0,
 slide: function(event, ui) {
 currentValue.html(ui.value);
 }
 });
});

代碼非常簡單。使用slider方法來實現。
最有意思的部分
因為我們已經實現了自己的區域選擇方法，大家可以參考演示

<p id="container">
 <p id="control"></p>
</p>

<!-- The range input is hidden and updated on each rotation of the knob -->
<input type="range" id="slider" min="0" max="500" value="25" />

<p class="note">Current value: <span id="currentValue">0</span></p>

assets/js/slider-knob.js

$(function(){
 var slider = $('#slider'),
 min = slider.attr('min'),
 max = slider.attr('max'),
 currentValue = $('#currentValue');
 // Hiding the slider:
 slider.hide();
 $('#control').knobKnob({
 snap : 10,
 value: 250,
 turn : function(ratio){
 // Changing the value of the hidden slider
 slider.val(Math.round(ratio*(max-min) + min));
 // Updating the current value text
 currentValue.html(slider.val());
 }
 });
});

以上代碼使用min和max來計算數值。
總結
滑動選擇對于用戶使用來說比輸入框非常方便。雖然瀏覽器支持有限，但是你可以使用jQuery來增強相關功能。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

實例幫助你了解HTML5滑動區域選擇元素Sliderelement

推薦度：

點擊下載本文 文檔為doc格式

標簽：幫助滑動 html5

熱門焦點

實例幫助你了解HTML5滑動區域選擇元素Sliderelement

實例幫助你了解HTML5滑動區域選擇元素Sliderelement

實例幫助你了解HTML5滑動區域選擇元素Sliderelement

最新推薦

猜你喜歡

熱門推薦