Score
0
Watch 8 Star 20 Fork 9

彭博 / jquery-range-pickerJavaScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
用于选取某个区段值 spread retract

Clone or download
Loading...
README.md

jquery-range-picker

选择区间值的独立 jQuery 组件

一、演示

1、地址:
http://sandbox.runjs.cn/show/aphyogeq

2、效果图:

二、如何使用

1、引入库

<script type="text/javascript" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<!-- 下面两个库用来提供 drag 事件支持,也可自行替换为支持 drag 的其他库  -->
<script type="text/javascript" src="jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="jquery.event.drag.live-2.2.js"></script>
<!-- jquery range picker 库  -->
<script type="text/javascript" src="jquery.range-pikcer.js"></script>

2、添加 Dom 节点

<span class="daisy-range-picker"></span>

3、启用 jquery-range-picker 插件,并配置参数

<script type="text/javascript">
	$(function(){
		picker = $(".daisy-range-picker").range_picker({
        	//是否显示分割线
			show_seperator:false,
            //是否启用动画
		 	animate:false,
            //初始化开始区间值
			from:2,
            //初始化结束区间值
			to:5,
            //选取块宽度
			picker_width:14,
            //各区间值
			ranges:[1,2,3,4,5,6,7],
			onChange:function(from_to){
				$(".msg").html(from_to[0]+'~'+from_to[1]);
			},
			onSelect:function(index,from_to){
				$(".msg").html(from_to[0]+'~'+from_to[1]);
			},
			afterInit:function(){
				var picker = this;
				var ranges = picker.options.ranges;
				$(".msg").html(ranges[0]+'~'+ranges[ranges.length-1]);
			}
		});
	});
</script>

三、参数说明

from:开始区间值(默认值:0)
to :结束区间值(默认值:∞)
ranges :各区间值 (默认值:[0,1000,2000,5000,10000,'∞'])
axis_width :轴长度 (默认值:200)
picker_width :选取块宽度 (默认值:8)
show_seperator :是否显示分割线 (默认值:true)
animate :是否启用动画 (默认值:false)
onSelect :当 drag 结束,选定好某个区间时调用(如下:this为当前控件实例,index:选取块所在区间序号,from_to:区间值数组)

onSelect:function(index,from_to){
	var self = this;
	var from = from_to[0];
	var to = from_to[1];
}  

beforeInit :控件初始化前调用 (this为当前控件实例)
afterInit :控件初始化后调用 (this为当前控件实例)
picker.options :picker 为控件实例,picker.options为所有配置参数

Comments ( 1 )

Sign in for post a comment

JavaScript
1
https://gitee.com/bluishoul/jquery-range-picker.git
git@gitee.com:bluishoul/jquery-range-picker.git
bluishoul
jquery-range-picker
jquery-range-picker
master

Search