LuLu UI组件中文文档 » range范围选择

range范围选择

一、range范围选择

  1. 基本使用示意

    基于HTML5 type="range"区域选择框实现的range选择组件。

    透明度:

    <span>透明度:</span><input type="range" id="opacityRange" class="ui-range-input" value="50" min="0" max="100" step="10">
    $("#opacityRange").change(function() {
        $(this).siblings('span').css('opacity', this.value / 100);
    }).range({
        tips: function(value) {
            return value + '%';
        }
    });

    range选择的最大值小值由原生的minmax属性控制,每次选择的范围由step属性控制。

    三个属性都可以缺省,min默认为0max默认为100step默认是1

  2. 语法

    new Range(el, options);

    el只能是单个DOM jQuery包装器对象,如果你想多个range元素同时自定义化,可以使用jQuery链式调用。

    $().range(options);

    当你拖选范围的时候,如果区域变化,会自动触发原生range inputchange事件,因此,我们只要关系原生的选择控件本身就可以了。

    options可选参数只有一个,就是tips

    参数名称 支持类型 默认值 释义
    reverse Boolean false 黑色tips是否朝下显示。默认朝上,设置为true则朝下显示。
    tips Function|Null {
      tips: function(value) {
        return value;
      }
    }
    如果tips是Function,则按住圈圈拖动的时候,会将其返回的值作为黑色tips的内容显示。其中,上下文this指的是input元素,支持一个参数,为当前的值。如果tipsnull, 则表示不显示黑色tips。

    本组件依赖tips组件。

二、作为插件独立使用

引入如下CSS和JS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Tips.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Range.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Follow.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Tips.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Range.js"></script>

或者引入合并的资源:

<link rel="stylesheet" href="//qidian.gtimg.com/c/=/lulu/theme/peak/css/common/ui/Tips.css,/lulu/theme/peak/css/common/ui/Range.css">
<script src="//qidian.gtimg.com/c/=/lulu/theme/peak/js/common/ui/Follow.js,/lulu/theme/peak/js/common/ui/Tips.js,/lulu/theme/peak/js/common/ui/Range.js"></script>

单独使用Demo演示

Fork Me 返回顶部