pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

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

HTML5的出現帶給我們了很多新的標簽和元素。其中一個就是區間選擇輸入元素,例如,選擇10以內的一個數字。這個元素其實在很多系統操作系統中都存在了很長時間,但是現在只是如何
       HTML5的出現帶給我們了很多新的標簽和元素。其中一個就是區間選擇輸入元素,例如,選擇10以內的一個數字。這個元素其實在很多系統操作系統中都存在了很長時間,但是現在只是如何將他們整合到瀏覽器中。

       因為使用JS可以很方便的模擬出這個效果所以HTML中一直沒有可以直接使用的滑動選擇元素。jQuery UI類庫包含了一個非常不錯的版本可以很容易進行樣式設置。但是整合到瀏覽器中將非常簡單,支持對于支持它的瀏覽器來說。

1.jpg



       瀏覽器支持

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

2.jpg



       如何工作的?

       區域選擇輸入元素使用輸入框類似的標簽<input type="range" />,支持一般的數值屬性,及其min和max,用來限制區域,step用來設置滑動中數值增量。缺省為1。

23.jpg



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

  1. <input id="defaultSlider" type="range" min="0" max="500" />
  2. <p class="note">Current value: <span id="currentValue">0</span></p>
復制代碼

       或者

  1. $(function(){
  2.         var currentValue = $('#currentValue');
  3.         $('#defaultSlider').change(function(){
  4.             currentValue.html(this.value);
  5.         });
  6.         // Trigger the event on load, so
  7.         // the value field is populated:
  8.         $('#defaultSlider').change();
  9. });
復制代碼

       當然這些代碼需要瀏覽器支持。否則你只能看到一個輸入框。

       當然2/3的瀏覽器都看不到我們這個區域選擇輸入,我們需要想想別的方法。我們先快速使用jQueryUI來實現一個滑動選擇器。

  1. <div id="slider"></div>
  2. <p class="note">Current value: <span id="currentValue">0</span></p>
復制代碼

       你可以看到代碼如下:

  1. $(function(){
  2.         var currentValue = $('#currentValue');
  3.         $("#slider").slider({
  4.                 max: 500,
  5.                 min: 0,
  6.                 slide: function(event, ui) {
  7.                         currentValue.html(ui.value);
  8.                 }
  9.         });
  10. });
復制代碼

       代碼非常簡單。使用slider方法來實現。

       最有意思的部分

       因為我們已經實現了自己的區域選擇方法,大家可以參考演示。

       slider-knob.html

  1. <div id="container">
  2.         <div id="control"></div>
  3. </div>

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

  6. <p class="note">Current value: <span id="currentValue">0</span></p>
復制代碼

       assets/js/slider-knob.js

  1. $(function(){

  2.         var slider = $('#slider'),
  3.                 min = slider.attr('min'),
  4.                 max = slider.attr('max'),
  5.                 currentValue = $('#currentValue');

  6.         // Hiding the slider:
  7.         slider.hide();

  8.         $('#control').knobKnob({
  9.                 snap : 10,
  10.                 value: 250,
  11.                 turn : function(ratio){
  12.                         // Changing the value of the hidden slider
  13.                         slider.val(Math.round(ratio*(max-min) + min));

  14.                         // Updating the current value text
  15.                         currentValue.html(slider.val());
  16.                 }
  17.         });

  18. });
復制代碼

       以上代碼使用min和max來計算數值。

       總結

       滑動選擇對于用戶使用來說比輸入框非常方便 。雖然瀏覽器支持有限,但是你可以使用jQuery來增強相關功能。


在線演示一在線演示二在線演示三

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 网架支座@球铰支座@钢结构支座@成品支座厂家@万向滑动支座_桥兴工程橡胶有限公司 | 生物制药洁净车间-GMP车间净化工程-食品净化厂房-杭州波涛净化设备工程有限公司 | 比士亚-专业恒温恒湿酒窖,酒柜,雪茄柜的设计定制 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 | 健身器材-健身器材厂家专卖-上海七诚健身器材有限公司 | 圆窗水平仪|伊莉莎冈特elesa+ganter| 道康宁消泡剂-瓦克-大川进口消泡剂供应商 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | 酒店品牌设计-酒店vi设计-酒店标识设计【国际级】VI策划公司 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | 冲锋衣滑雪服厂家-冲锋衣定制工厂-滑雪服加工厂-广东睿牛户外(S-GERT) | led冷热冲击试验箱_LED高低温冲击试验箱_老化试验箱-爱佩百科 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 江苏齐宝进出口贸易有限公司| 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 【化妆品备案】进口化妆品备案流程-深圳美尚美化妆品有限公司 | 宜兴紫砂壶知识分享 - 宜兴壶人 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 固诺家居-全屋定制十大品牌_整体衣柜木门橱柜招商加盟 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | 361°官方网站 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 自恢复保险丝_贴片保险丝_力特保险丝_Littelfuse_可恢复保险丝供应商-秦晋电子 | 广西绿桂涂料--承接隔热涂料、隔音涂料、真石漆、多彩仿石漆等涂料工程双包施工 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 |