2 Star 12 Fork 2

慕云枫 / layPicker

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

layPicker

日志

前往更新日志

介绍

基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

效果图

微信版效果

输入图片说明 输入图片说明 输入图片说明

旧版效果

输入图片说明 输入图片说明

安装教程

需要基于jquery

css

<link rel="stylesheet" href="css/lay-picker.css" />

JavaScript

<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/lay-picker.js" ></script>

使用说明

参数说明

字段 类型 默认值 说明
elem 字符串 绑定元素,用于触发选择器
radius 整型/字符串 圆角数值
textField 字符串 name 显示的名称对应字段,根据数据的字段对应
valueField 字符串 value 获取的值对应字段,根据数据的字段对应
data 数组 如果使用options参数,则不需要设置data,反之必须设置data;固定式需要设置占位,如:[[{name:'张三', value:101}], [], []] (这里占位共三列滚动列)
title 字符串 标题显示
shade 数字 默认0.4透明度 遮罩:可调整0~1(设置false,则关闭遮罩)
minDate 字符串 最小日期/时间限制
maxDate 字符串 最大日期/时间限制
btns 数组 如:['重置', '确认']
search 布尔/字符串 false 是否开启搜索,填充字符串则为输入框提示【注:只对单列有效】
type 整型 设置2为微信版,设置3自定义html(需要配合content参数),默认无
options 字符串 设置为日期选择器(日期选择器可设置:year、month、date、time、timesecond、datetime、datetimesecond),不设置默认取data作为选择值
onSuccess function (index, elem) 渲染成功回调
onSelect function (index, i, result) 停止滚动触发:index是当前对象的标识, i 是当前滑动的下标对象,result是前面的值集
onConfirm function (index, value, result) 点击确认回调
onCancel function (index) 点击取消回调
onShade function (index) 点击遮罩回调
onShow function (index) 点击显示回调
返回值

var layIndex = layPicker.init({}); index是第几个的意思

删除指定

layPicker.remove(layIndex);

删除所有

layPicker.removeAll();

赋值设置(如:年月日:2023-09-11)

layPicker.setValue(index, [ {value: '2023'}, {value: '09'}, {value: '11'}, ])

值重置(layIndex是指定哪个选择器,-1是设置第几行滚动列(从-1开始,因为内置加一下标),array就是重置的数据)

layPicker.setData(layIndex, -1, array);

值重置-动态(layIndex是指定哪个选择器,-1是设置第几行滚动列(从-1开始,因为内置加一下标),array就是重置的数据)

layPicker.setDataTrends(layIndex, -1, array); 参考index.html中的‘动态调整’,选择第一列后,第二第三...列动态变动(动画效果)

示例

layPicker.init({
	elem: '#year', // 绑定元素
	options: 'year', // 设置为日期选择器(日期选择器可设置:year、month、date、time、timesecond、datetime、datetimesecond),不设置默认取data作为选择值
	onSuccess: function(index, elem){ // 渲染成功回调
	    layPicker.setValue(index, [
	        {value: '2023'},
	    ])
	},
	onSelect: function(result){
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
	    $("#year").val(value)
	    console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})
静态占位选择
// 选择地区
layPicker.init({
	elem: '#addr', // 绑定元素
	data: [addr_array, addr_array_bj, []], // 列数值 (addr_array省,addr_array_bj市,[]区)
	onSuccess: function(index, elem){ // 渲染成功回调
	},
	onSelect: function(index, i, result){ // 停止滚动触发:index是当前对象的标识, i 是当前滑动的下标对象,result是前面的值集
		if(i == 0){
			if(result[i].name == '北京'){
				layPicker.setData(index, i, addr_array_bj);
			}else if(result[i].name == '广东'){
				layPicker.setData(index, i, addr_array_gd);
				layPicker.setData(index, i+1, add_array_gd_dg);
			}
		}else if(i == 1){
			if(result[i].name == '深圳市'){
				layPicker.setData(index, i, add_array_gd_sz);
			}else if(result[i].name == '东莞市'){
				layPicker.setData(index, i, add_array_gd_dg);
			}else{
				layPicker.setData(index, i, []);
			}
		}
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
		//结果处理后再显示
		var text = [];
		for(var i = 0; i < result.length; i++) {
			text.push(result[i].name);
		}
		$("#addr").val(text.join('-'))
		console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})
可以动态调整
// 动态调整
layPicker.init({
	elem: '#trends', // 绑定元素
	data: [addr_array], // 列数值(使用动态这里可以不用占位,这里假设第一个参数没子级,如果默认第一个值,就要追加子级数组)
	onSuccess: function(index, elem){ // 渲染成功回调
	},
	onSelect: function(index, i, result){ // 停止滚动触发:index是当前对象的标识, i 是当前滑动的下标对象,result是前面的值集
		if(i == 0){
			if(result[i].name == '北京'){
				layPicker.setDataTrends(index, i, addr_array_bj);
			}else if(result[i].name == '广东'){
				layPicker.setDataTrends(index, i, addr_array_gd);
				layPicker.setDataTrends(index, i+1, add_array_gd_dg);
			}
		}else if(i == 1){
			if(result[i].name == '深圳市'){
				layPicker.setDataTrends(index, i, add_array_gd_sz);
			}else if(result[i].name == '广州市'){
				layPicker.setDataTrends(index, i, null);
			}else if(result[i].name == '东莞市'){
				layPicker.setDataTrends(index, i, add_array_gd_dg);
			}
		}
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
		//结果处理后再显示
		var text = [];
		for(var i = 0; i < result.length; i++) {
			text.push(result[i].name);
		}
		$("#trends").val(text.join('-'))
		console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})

更多参考index.html

MIT License Copyright (c) 2023 慕云枫 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/yuanyongqiang/lay-picker.git
git@gitee.com:yuanyongqiang/lay-picker.git
yuanyongqiang
lay-picker
layPicker
master

搜索帮助