Range 滑块
使用方法
input默认的range
类型在各浏览器下形态各异,本框架借助css统一了外观(chrome无法美化进度部分,用户需另写JS控制),可跟普通表单混用。
音量:
音量:
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" disabled></div> </div> </div> </div>
通过简单js
可控制range游标变化,或在页面输出range的值。
音量:
-
<script type='text/javascript'> $(document).ready(function () { $('#volBtn').click(function () { $('#volInput').val("20"); }); $('#volOutput').bind('input propertychange', function() { $('#volVal').html($(this).val() + '%'); }); }); </script>
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" id="volInput"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-text" id="volBtn">点击值变成20</a> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" value="30" id="volOutput"></div> </div> <span class="ax-form-txt ax-color-ignore" id="volVal">30%</span> </div> </div>
range跟其他表单控件一样支持多个尺寸,默认是ax-md
(高38px),其他可用ax-xs
(高22px),ax-sm
(高28px)和ax-lg
(高48px)。
音量xs:
音量sm:
音量lg:
<div class="ax-form-group ax-xs"> <div class="ax-flex-row"> <div class="ax-form-label">音量xs:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group ax-sm"> <div class="ax-flex-row"> <div class="ax-form-label">音量sm:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group ax-lg"> <div class="ax-flex-row"> <div class="ax-form-label">音量lg:</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range"></div> </div> </div> </div> <div class="ax-break-md"></div> <input type="range" class="ax-xs"> <input type="range" class="ax-sm"> <input type="range" class="ax-lg">
插件滑块
本滑块插件是在原第三方插件ion.rangeSlider
的v2.3.1版本基础上改造而来,去掉了jQuery依赖。该插件在Github很受欢迎,使用简单直接,参数全面,能满足绝大多数场景需求,API和具体使用方法见其官网ion.rangeSlider或Github。
另外本框架根据插件说明自制了皮肤,修改了原css,参见演示效果。
- 重构了插件,剔除jQuery依赖,并按ax插件风格对插件进行了格式化
- 清理了ion的相关css,替换为ax风格的css样式写法
- skin参数改成className参数,并默认为空
- ionRangeSlider插件名改成axRange
- 将参数下划线分割改成大写驼峰分割,比如from_min改成了fromMin
- 修改了监听方式
- toFixed和fromFixed参数改名为toStick和fromStick,避免与toFixed函数混淆
- prettifyEnabled参数默认设为false,也就是不使用千分位 disabled
- 强迫症犯了,把disable参数改成disabled
- 去掉了extra_class参数,如果需要自定义样式,使用className参数便可
运行条件
页面引入ax.css
和ax.js
之后还需再追加引用以下文件:
<script src=" https://src.axui.cn/v2.0/src/plugins/range/range.min.js" type="text/javascript"></script>
使用方法
插件运行方式有两种:
- ax*属性:对input标签使用
axRange
属性即可按默认参数运行插件。 - js实例:通过
new axRange('#ID')
方式创建实例运行。
属性使用:
JS使用:
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">属性使用:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange value="41"></div> </div> </div> </div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">JS使用:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" id="dft" value="41"></div> </div> </div> </div>
-
new axRange('#dft');
单滑块
以下演示单滑块的实例。更多单滑块的实例请参加原插件官网。
加刻度:
加限制:
两个:
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">加刻度:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='grid:true'></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">加限制:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='min:0,max:1000,from:500,grid:true,fromMin:"250",fromMax:600,fromShadow:true'></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='type:"double",min:0,max:1000,from:400,to:600,dragInterval:true'></div> </div> </div> </div>
-
//单个联动使用 let sliderSinputfrom = document.querySelector("#slider05-from"), sliderSmin = 0, sliderSmax = 1000, sliderSfrom = 0; let sliderS = axRange('#slider05', { skin: "ax", min: sliderSmin, max: sliderSmax, from: 500, onStart: updateS, onChange: updateS }); function updateS(data) { from = data.from; sliderSinputfrom.value = from; } sliderSinputfrom.addEventListener('input', function() { var val = this.value; if (val < sliderSmin || val==sliderSmin) { val=sliderSmin; } else if (val> sliderSmax || val == sliderSmax) { val = sliderSmax; } sliderS.update({ from: val }); }); document.querySelector('#sliderSbtn').onclick = function() { var val = this.getAttribute('data-from'); sliderSinputfrom.value = val; sliderS.update({ from: val }); }
双滑块联动
以下演示双滑块的实例。更多单滑块的实例请参加原插件官网。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单个联动:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider05" value="41" type="text"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单个联动:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider05-from" value="" type="text"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="sliderSbtn" data-from="280">设定280</a> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个联动:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider06" type="text"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个联动:</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-col ax-col-8"><input name="username" placeholder="最小" value="" id="slider06-from" type="text"></div> <span class="ax-bunch-txt">~</span> <div class="ax-col ax-col-8"><input name="username" placeholder="最大" value="" id="slider06-to" type="text"></div> </div> </div> </div> <a href="###" class="ax-form-btn ax-btn" id="sliderDbtn" data-from="300" data-to="400">设定300-400</a> </div> </div>
-
//两个range联动使用 var sliderDinputfrom = document.querySelector("#slider06-from"), sliderDinputto = document.querySelector("#slider06-to"), sliderDmin = 0, sliderDmax = 1000, sliderDfrom = 0, sliderDto = 0; let sliderD = axRange('#slider06', { skin: "ax", type: "double", min: sliderDmin, max: sliderDmax, from: 100, to: 800, onStart: updateD, onChange: updateD }); function updateD(data) { from = data.from; to = data.to; sliderDinputfrom.value = from; sliderDinputto.value = to; } sliderDinputfrom.addEventListener('input', function() { var val = this.value; if (val < sliderDmin || val==sliderDmin) { val=sliderDmin; } else if (val> sliderDmax || val == sliderDmax) { val = sliderDmax; } sliderD.update({ from: val }); }); sliderDinputto.addEventListener('input', function() { var val = this.value; if (val < sliderDfrom) { val=sliderDfrom; } else if (val> sliderDmax) { val = sliderDmax; } sliderD.update({ to: val }); }); document.querySelector("#sliderDbtn").onclick = function() { var valfrom = this.getAttribute('data-from'); var valto = this.getAttribute('data-to'); sliderDinputfrom.value = valfrom; sliderDinputto.value = valto; sliderD.update({ from: valfrom, to: valto }); };
禁用
使用参数disabled:true
即可禁用。
禁用:
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">禁用:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='disabled:true'></div> </div> </div> </div>
监听事件
本插件有若干监听方法,以on为关键字,实例后监听和在参数中监听效果相同。格式是:instance.on('event',function(){})
;具体事件说明如下:
destroy
销毁实例时执行reset
重置后执行updated
参数更新后执行
演示实例显示结果使用了console.log方法,请按下F12按键打开开发者工具中的“控制台”查看监听效果。
监听:
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">监听:</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" id="instance"></div> </div> </div> </div> <button id="update" class="ax-btn">更新</button> <button id="reset" class="ax-btn">重置</button> <button id="destroy" class="ax-btn">摧毁</button>
-
//监听 let instance = new axRange('#instance', { min: 0, max: 100, grid: true, fromMin: 25, fromMax: 75, fromShadow: true, }); document.querySelector('#update').onclick = function() { instance.update({ max: 80, }) } document.querySelector('#destroy').onclick = function() { instance.destroy(); } document.querySelector('#reset').onclick = function() { instance.reset(); } instance.on('updated', function() { console.log('更新了参数!'); }).on('reset', function() { console.log('重置了实例!'); }).on('destroy', function() { console.log('销毁了实例!'); })
参数选项
document.addEventListener("DOMContentLoaded", function() { var demo1 = new axRange('ID',{ className: "",//追加类名 type: "single",//类型,默认单手柄,可选择double双手柄 min: 0,//轨道最小值 max: 100,//轨道最大值 from: null,//加载后从哪个值开始 to: null,//加载后从哪个值结束(对双手柄中的右手柄有效) step: 1,//步进 minInterval: 0,//锁定手柄后的起点和终点间隔的最小值 maxInterval: 0,//锁定手柄后的起点和终点间隔的最大值 dragInterval: false,//锁定双手柄后可拖拽 values: [],//轨道刻度值 pValues: [],//备用值 fromStick: false,//加载后,是否固定起始值手柄 fromMin: null,//加载后,起始手柄允许的最小值 fromMax: null,//加载后,起始手柄允许的最大值 fromShadow: false,//是否显示起始手柄范围指示线 toStick: false,//加载后,是否固定终点值手柄 toMin: null,//加载后,终点手柄允许的最小值 toMax: null,//加载后,终点手柄允许的最小值 toShadow: false,//是否显示终点手柄范围指示线 prettifyEnabled: false,//是否显示千分位 prettifySeparator: " ",//设置千分位字符 prettify: null,//使用函数自定义分隔符 forceEdges: false,//是否锁定在区域内,不外溢 keyboard: true,//是否允许键盘的上下左右键控制滑块 grid: false,//是否使用刻度 gridMargin: true,//刻度左右两侧间距,如果是false那么与手柄不完美对齐 gridNum: 4,//刻度等分为几份 gridSnap: false,//是否按等分步进 hideLabelTrack: false,//是否隐藏轨道起止标签 hideLabelSlider: false,//是否隐藏起止手柄的标签 prefix: "",//前缀符号 postfix: "",//后缀符号 maxPostfix: "",//最大值的后缀符号 decorateBoth: true,//是否自动出现连接符,对双手柄有效 valuesSeparator: " — ",//手柄相连后的连接符,对双手柄有效 inputValuesSeparator: ";",//Input中值的分隔符,对双手柄有效 disabled: false,//是否禁用 block: false,//是否锁定,(不禁用) scope: null, onStart: null,//加载完成回调 onChange: null,//值改变后回调 onFinish: null,//完成操作后回调 onUpdate: null//更新后回调 }); });
以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"
操作方法
名称 | 说明 | 参数说明 | 回调函数 |
---|---|---|---|
init() | 初始化 | 无参数 | 无回调函数 |
update(setting, callback) | 更新所有参数 | setting是用户自定义参数,是一个对象;callback是回调函数,可不填 | function(){} 无参数 |
destroy(callback) | 销毁实例 | callback是回调函数,可不填 | function(){} 无参数 |
on(type, handler) | 添加监听事件 | type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 | function(index){} index:当前li的索引,可不填 |
off(type, handler) | 取消监听事件 | type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 | function(){} 无参数 |
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
- this:实例本身
- this.targetDom:实例的Dom
- this.options:实例的参数