做了几个mui选择器使用demo
需要的js 和 css
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>demo：mui选择器demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
<style type="text/css">
.membermain{
width: 100%;
padding: 2%;
}
.place button{
width:100%;
color: #676664 !important;
border: 0 !important;
padding: 11px 15px;
text-align: right;
}
.place{
}
.inpr{
text-align: right;
}
.mui-input-row .mui-btn {
float: right;
width: 60%;
padding: 11px 15px;
}
.borbot{
border-bottom: 1px solid #BBBBBB;
}
.name>div,.content>div,.footbz>div{
padding: 2px;
}
.name,.content,.footbz{
padding: 5px 0;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav hbg">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
<h1 class="mui-title">新增会员</h1>
<div class="ic mui-icon-right-nav mui-pull-right" onclick="goadd()">保存</div>
</header>
<div class="mui-content">
<div class="membermain">
<div class="content">
<div class="mui-input-row borbot" >
<label>等级</label>
<div class="place items" >
<button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">等级选择</button>
</div>
</div>
<div class="mui-input-row borbot">
<label>性别</label>
<div class="place items" >
<button id='gender' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">男</button>
</div>
</div>
<div class="mui-input-row borbot">
<label>生日</label>
<div class="place items" >
<button id='birthday' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择</button>
</div>
</div>
<div class="mui-input-row borbot">
<label>地区</label>
<div class="place items" >
<button id='address' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">地区选择</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
//等级
mui.ready(function() {
var levelPicker = new mui.PopPicker();
levelPicker.setData([{
value: '1',
text: '甲'
}, {
value: '2',
text: '乙'
}, {
value: '3',
text: '丙'
}, {
value: '4',
text: '丁'
}]);
var level = document.getElementById('level');
level.addEventListener('tap', function(event) {
levelPicker.show(function(items) {
level.innerText = items[0].text;
});
}, false);
//性别
var genderPicker = new mui.PopPicker();
genderPicker.setData([{
value: '男',
text: '男'
}, {
value: '女',
text: '女'
}]);
var gender = document.getElementById('gender');
gender.addEventListener('tap', function(event) {
genderPicker.show(function(items) {
gender.innerText = items[0].text;
});
}, false);
//生日 日期
var birthday = document.getElementById('birthday');
birthday.addEventListener('tap', function(event) {
var birthdayPicker = new mui.DtPicker({
type: "Datetime",//设置日历初始视图模式 //真正的月份比写的多一个月。 type的类型你还是可以选择date, datetime month time hour
beginDate: new Date(1950, 01, 01, 0, 0),//设置开始日期
endDate: new Date(2018, 12, 31, 0, 0),//设置结束日期 //真正的是10.21
labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语
})
birthdayPicker.show(function(e) {
birthday.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text+" "+e.h.text+":"+e.i.text;
});
}, false);
//地址
var addressPicker = new mui.PopPicker({
layer: 3
});
addressPicker.setData(cityData3);
var address = document.getElementById('address');
address.addEventListener('tap', function(event) {
addressPicker.show(function(items) {
address.innerText = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
});
}, false);
});
}
</script>
</body>
</html>
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
