form表单提交涉及到slider（jRange）

作者: 麦克劳林 | 来源:发表于2018-08-13 08:47 被阅读18次

最近做商城的时候，需要做选择价格区间的这么一个功能，为了让选择更加直观，更加灵活；在网上搜索到了一款不错的插件，一款jQuery插件jRange：

该插件使用起来也比较简单（而且官网也有详细说明）：

首先引入两个文件：

<link rel="stylesheet" type="text/css" href="css/jquery.range.css">
<script type="text/javascript" src="js/jquery.range.js"></script>

（当然还有jquery-1.11.3.min.js，毕竟该插件是以jquery开发的）

html部分代码：

<input type="hidden" id="range" class="slider-input" value="3000" />

js部分：

$('.slider-input').jRange({
from: 0,
to: 10000,
step: 1,
format: '%s'+'元',
width: 240,
showLabels: true,
isRange : true
});

以上就是引用过程，就是这么简单！

选项	必选	类型	说明
from	必选	Integer	最小值
to	必选	Integer	最大值
step	可选	Integer	增量 (默认为1)
scale	可选	Array	刻度条。例如[0,50,100]
showLabels	可选	Boolean	显示标签(默认true)
showScale	可选	Boolean	显示刻度(默认true)
format	可选	String/Function	用来设置标签的格式例如"%s 天"
width	可选	Integer	宽度(默认300)
theme	可选	String	主题(默认是"theme-green"绿色),还有"theme-blue"蓝色。你可以在jquery.range.less中设置
isRange	可选	Boolean	是否为范围(默认false,选择一个点),如果是true，选择的是范围,格式为'1,2'
snap	可选	Boolean	是否只允许按增值选择(默认false)
disable	可选	Boolean	是否只读(默认false),若为true,只读模式，无法选择。可以用js动态设置 $('.slider').jRange('disable');$ ('.slider').jRange('enable'); $('.slider').jRange('toggleDisable');
onstatechange	可选	Function	数字变化的时候的回调函数
ondragend	可选	Function	拖动结束时的回调函数
onbarclicked	可选	Function	刻度条被按住时的回调函数

网友评论

本文标题：form表单提交涉及到slider（jRange）

本文链接：https://www.haomeiwen.com/subject/juckbftx.html

form表单提交涉及到slider（jRange）