mui选择器

心已赠人 2022-04-10 06:27 224阅读 0赞

做了几个mui选择器使用demo

需要的js 和 css

demo：[mui选择器demo][mui_demo]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1][]

<!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>

[mui_demo]: https://download.csdn.net/download/qq_38026437/10882736
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181228110937285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1]: /images/20220402/8ce9be2cd8c145ecb4e9f52a3e1e7118.png