HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 实例帮助你了解HTML5滑动区域选择元素Slider element

实例帮助你了解HTML5滑动区域选择元素Slider element

       HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素,例如,选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间,但是现在只是如何将他们整合到浏览器中。

       因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单,支持对于支持它的浏览器来说。




       浏览器支持

       除了著名的Firefox外所有的现代浏览器都支持这个元素,但是很容易使用html5slider.js来创建。当然IE也不支持区域选择输入,这个修改不太容易。这样的话,意味着你需要使用分开的类库类似jQuery UI来支持多浏览器。好消息在于如果浏览器不支持区域选择的话,它会做为一个输入框显示。




       如何工作的?

       区域选择输入元素使用输入框类似的标签<input type="range" />,支持一般的数值属性,及其min和max,用来限制区域,step用来设置滑动中数值增量。缺省为1。




       你可以使用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来增强相关功能。


在线演示一在线演示二在线演示三

【实例帮助你了解HTML5滑动区域选择元素Slider element】相关文章

1. 实例帮助你了解HTML5滑动区域选择元素Slider element

2. 帮助你快速了解HTML5的入门指南

3. H.264真能一统江湖?让你了解HTML 5

4. Elementimals

5. 摩托罗拉发布Web应用框架 RhoElements

6. 使用 Responsive Elements 快速构建响应式网站

7. 20个案例让你了解用HTML5可以做出什么作品

8. 全方位了解HTML5

9. 营销人员也需要了解HTML5的特点

10. 一张信息图帮你了解智能手机市场演变格局

本文来源:https://www.51html5.com/a655.html

点击展开全部

﹝实例帮助你了解HTML5滑动区域选择元素Slider element﹞相关内容

「实例帮助你了解HTML5滑动区域选择元素Slider element」相关专题

其它栏目

也许您还喜欢