选择器(picker)和时间选择器(dtpicker)的使用和封装"/>
mui 普通选择器(picker)和时间选择器(dtpicker)的使用和封装
小白初次接触mui框架，因为 官方文档 简单且描述不全，因此在做选择器的时候是一步一个坑。现在贴一个完整的demo，方便以后查看。
html页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>picker</title><link rel="stylesheet" href="../mui/css/mui.min.css"><link rel="stylesheet" href="../mui/css/mui.picker.min.css"><style>#content {background: white;padding: 11px 15px;}.mui-input-row {border-bottom: 1px solid #ccc;}.mui-input-row label {padding: 0;}.data-box {width: 65%;float: right;text-align: right;}.data-box span {display: inline-block;width: 80%;margin-bottom: 0;border: none;text-align: right;padding: 11px 5px;}.data-box .mui-icon {float: right;line-height: 42px;}</style>
</head><body><div id="content"><div class="mui-input-row"><label for="">测试</label><div class="data-box" id="moneyBox"><span>一级选择器</span><i class="mui-icon mui-icon-arrowdown"></i></div></div><div class="mui-input-row"><label for="">测试</label><div class="data-box" id="twoBox"><span>二级选择器</span><i class="mui-icon mui-icon-arrowdown"></i></div></div><div class="mui-input-row"><label for="">测试</label><div class="data-box" id="threeBox"><span>多级选择器</span><i class="mui-icon mui-icon-arrowdown"></i></div></div><div class="mui-input-row"><label for="">测试</label><div class="data-box" id="dateTime"><span>请选择时间</span><i class="mui-icon mui-icon-arrowdown"></i></div></div></div>
</body><script src="../mui/js/jQuery.js"></script>
<script src="../mui/js/mui.js"></script>
<script src="../mui/js/mui.picker.js"></script>
<!-- 这块儿有个疑问，一个是压缩版一个是没有压缩的，但是两者代码是一样的，然而如果只是单纯的引入mui.picker.js某些方法会报错，所以需要引入mui.picker.min.js -->
<script src="../mui/js/mui.picker.min.js"></script>
<script src="../mui/js/mui.poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script src="../js/city.data.js"></script>
<script src="../js/picker.js"></script>
<script>$(function () {$(".mui-input-row label").css({'line-height': $(".mui-input-row").height() + 'px'})//注意点：绑定click点击事件，如果存在上拉加载、下拉刷新时会失效，所以改为tap事件$("#moneyBox").on('tap', function () {var doc = $(this);selectMuiPicker(1, doc, cityData)})$("#twoBox").on('tap', function () {var doc = $(this);selectMuiPicker(2, doc, cityData);})$("#threeBox").on('tap', function () {var doc = $(this);selectMuiPicker(3, doc, cityData3);})$("#dateTime").on('tap', function () {var obj1 = {doc: $(this),type: "datetime",//设置日历初始视图模式 begin: "1996-08-24",//设置开始日期 end: "2024-08-24",//设置结束日期 labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 customData: "" //时间/日期别名 }selectTimePicker(obj1)})})
</script></html>
封装的picker文件（picker.js）
/*** 一级联动* @param {区别是一级、二级还是多级选择器} layer* @param {dom元素} doc * @param {数据} data */
function selectMuiPicker(layer, doc, data) {if (layer == undefined || doc == undefined || data == undefined) {mui.alert("传参错误，请自行检查");console.error("传参错误，请自行检查")return;}var picker = new mui.PopPicker({layer: layer == "" || layer == null ? 1 : layer});picker.setData(data);// 取消按钮事件picker.cancel.addEventListener('tap', function () {picker.dispose();}, false);// 遮罩层点击事件picker.mask[0].addEventListener('tap', function () {picker.dispose();}, false);// 确定按钮点击事件picker.show(function (items) {var text = "";var value = "";for (var i = 0; i < items.length; i++) {if (items[i].text != undefined) {text += items[i].text + " ";value += items[i].value + "-";}}doc.find('span').text(text.slice(0, text.length - 1));doc.find('span').attr('pickerValue', value.slice(0, value.length - 1));picker.dispose();})
}/*** 时间选择器* @param {传入的对象参数} obj* @param {dom元素} obj.doc* @param {设置日历初始视图模式* 可支持的类型：* 'datetime' 完整日期视图(年月日时分)* 'date' 年视图(年月日)* 'time' 时间视图(时分)* 'month' 月视图(年月)* 'hour' 时视图(年月日时)* } obj.type* @param {设置可选择日期最小范围} obj.beginDate* @param {设置可选择日期最大范围} obj.endDate* @param {设置默认标签区域提示语} obj.labels* @param {设置时间/日期别名* 可支持的类型：* 'y' 可设置 年 别名* 'm' 可设置 月 别名* 'd' 可设置 日 别名* 'h' 可设置 时 别名* 'i' 可设置 分 别名* } obj.customData*/
function selectTimePicker(obj) {if (obj.doc == undefined || obj.doc == "") {mui.alert("传参错误，请自行检查");console.error("传参错误，请自行检查")return;}var dtPicker = new mui.DtPicker({type: obj.type == "" || obj.type == null || obj.type == undefined ? 'dateTime' : obj.type,beginDate: obj.begin == "" || obj.begin == null || obj.begin == undefined ? new Date((new Date().getTime()) - 5 * 365 * 24 * 3600 * 1000) : new Date(obj.begin),endDate: obj.end == "" || obj.end == null || obj.end == undefined ? new Date((new Date().getTime()) + 5 * 365 * 24 * 3600 * 1000) : new Date(obj.end),labels: obj.labels == "" || obj.labels == null || obj.labels == undefined || obj.labels.length <= 0 ? ['年', '月', '日', '时', '分'] : obj.labels,customData: obj.customData == null || obj.customData == undefined ? "" : obj.customData})// 确定按钮dtPicker.show(function (times) {if (obj.type == "" || obj.type == null || obj.type == undefined) {var text = times.y.value + "-" + times.m.value + "-" + times.d.value + " " + times.h.value + ":" + times.i.value;obj.doc.find("span").text(text);} else {obj.doc.find("span").text(times.text);}dtPicker.dispose();})// 取消按钮事件document.querySelector(".mui-backdrop").addEventListener('tap', function () {picker.dispose();}, false);// 遮罩层点击事件document.querySelector(".mui-dtpicker-header > button").addEventListener('tap', function () {picker.dispose();}, false);
}
更多推荐
mui 普通选择器(picker)和时间选择器(dtpicker)的使用和封装
发布评论