mui普通选择器（picker）和时间选择器（dtpicker）的使⽤和封装⼩⽩初次接触mui框架，因为 简单且描述不全，因此在做选择器的时候是⼀步⼀个坑。现在贴⼀个完整的demo，⽅便以后查看。html页⾯
<!DOCTYPE html>
<html lang="en">
mui框架常用方法<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>
<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("传参错误，请⾃⾏检查");
<("传参错误，请⾃⾏检查")
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' 时视图(年⽉⽇时)
* } pe
* @param {设置可选择⽇期最⼩范围} obj.beginDate
* @param {设置可选择⽇期最⼤范围} dDate
* @param {设置默认标签区域提⽰语} obj.labels
* @param {设置时间/⽇期别名
* 可⽀持的类型：
* 'y' 可设置年别名
* 'm' 可设置⽉别名
* 'd' 可设置⽇别名
* 'h' 可设置时别名
* 'i' 可设置分别名
* } obj.customData
*/
function selectTimePicker(obj){
if(obj.doc == undefined || obj.doc ==""){
mui.alert("传参错误，请⾃⾏检查");
<("传参错误，请⾃⾏检查")
return;
}
var dtPicker =new mui.DtPicker({
type: pe ==""|| pe ==null|| pe == undefined ?'dateTime': pe,
beginDate: obj.begin ==""|| obj.begin ==null|| obj.begin == undefined ?new Date((new Date().getTime())-5*365*24*3600*1000):new Date(obj.b egin),
endDate: d ==""|| d ==null|| d == undefined ?new Date((new Date().getTime())+5*365*24*3600*1000):new d), 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){
pe ==""|| pe ==null|| pe == undefined){
var text = value +"-"+ value +"-"+ times.d.value +" "+ times.h.value +":"+ times.i.value;
obj.doc.find("span").text(text);
}else{
obj.doc.find("span").);
}
dtPicker.dispose();
})
// 取消按钮事件
document.querySelector(".mui-backdrop").addEventListener('tap',function(){
picker.dispose();
},false);
// 遮罩层点击事件
document.querySelector(".mui-dtpicker-header > button").addEventListener('tap',function(){
picker.dispose();
},false);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论