小白初次接触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);
}
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
