代码拉取完成,页面将自动刷新
基于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();
layPicker.setValue(index, [ {value: '2023'}, {value: '09'}, {value: '11'}, ])
layPicker.setData(layIndex, -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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型