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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 直齿驱动-新型回转驱动和回转支承解决方案提供商-不二传动 | 机器视觉检测系统-视觉检测系统-机器视觉系统-ccd检测系统-视觉控制器-视控一体机 -海克易邦 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | ◆大型吹塑加工|吹塑加工|吹塑代加工|吹塑加工厂|吹塑设备|滚塑加工|滚塑代加工-莱力奇塑业有限公司 | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 热回收盐水机组-反应釜冷水机组-高低温冷水机组-北京蓝海神骏科技有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 上海公司注册-代理记账-招投标审计-上海昆仑扇财税咨询有限公司 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 品牌设计_VI设计_电影海报设计_包装设计_LOGO设计-Bacross新越品牌顾问 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | 广东西屋电气有限公司-广东西屋电气有限公司| 紧急切断阀_气动切断阀_不锈钢阀门_截止阀_球阀_蝶阀_闸阀-上海上兆阀门制造有限公司 | 浙江栓钉_焊钉_剪力钉厂家批发_杭州八建五金制造有限公司 | 翅片管换热器「型号全」_厂家-淄博鑫科环保| 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 高空重型升降平台_高空液压举升平台_高空作业平台_移动式升降机-河南华鹰机械设备有限公司 | 学叉车培训|叉车证报名|叉车查询|叉车证怎么考-工程机械培训网 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 氧化锆纤维_1800度高温退火炉_1800度高温烧结炉-南京理工宇龙新材料股份有限公司 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 厂房出租_厂房出售_产业园区招商_工业地产&nbsp;-&nbsp;中工招商网 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 干式磁选机_湿式磁选机_粉体除铁器-潍坊国铭矿山设备有限公司 | 砂石生产线_石料生产线设备_制砂生产线设备价格_生产厂家-河南中誉鼎力智能装备有限公司 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 刘秘书_你身边专业的工作范文写作小秘书 | 挨踢网-大家的导航! | 步进驱动器「一体化」步进电机品牌厂家-一体式步进驱动 | 雷冲击高压发生器-水内冷直流高压发生器-串联谐振分压器-武汉特高压电力科技有限公司 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 |