網頁裡引用mui的日曆，城市，自定義選擇標籤

qq_1913284695發表於2016-09-30
網頁UI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
<title></title>




<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />


 
<link href="css/mui.poppicker.css" rel="stylesheet" />




<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>


 
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>



<style>
div,span{box-sizing: border-box;}
.si_div{margin-left: 5%;width: 90%;line-height:50px;position: relative;height:35px;margin-top:25px;}
.si_div div{float:left;}
.si_font{width:15%;color:#333333;}
.si_da{width:85%;border-bottom: 1px #D9D9D9 solid;}
.si_fu{padding-left: 20px;color:#CDCDCD;font-size: 15px;}
.si_fu_b{width: 30px;float:right;margin-top: 13px;}





</style>
</head>
<body style="background: #FFFFFF;">

<section>
<div class="si_div" id="shengri" data-options='{"type":"date","beginYear":1956,"endYear":2016,"value":"1990-10-10"}'>
<div class="si_font">生日</div>
<div class="si_da">
<span class="si_fu" id="shenri_span">如：1991-01-01</span>
<span class="si_fu_b"><img src="images/bottom.png"></span>
</div>
</div>
<div class="si_div" id="shengao">
<div  class="si_font" >身高</div>
<div class="si_da">
<span class="si_fu" id="shengao_span">選擇身高範圍</span>
<span class="si_fu_b"><img src="images/bottom.png"></span>
</div>
</div>

<div class="si_div" id="chengshi">
<div class="si_font">城市</div>
<div class="si_da">
<span  class="si_fu" id="chengshi_span">如：浙江 杭州</span>
<span class="si_fu_b"><img src="images/bottom.png"></span>
</div>
</div>

<div class="si_div">
<div  class="si_font">微信</div>
<div class="si_da" style="height:52px;">
<input class="si_fu" type="text"  style="border:none;padding-left: 21px;" value="用於交流" id="weixin">
</div>
</div>

<div class="su_nextg" style="position: absolute;top:320px;" id="finisfu">完&nbsp;成</div>
<div  style="margin-top: 5px;text-align: center;font-size: 14px;color:#999999;position: absolute;top:390px;width: 100%;">(2/2)</div>

</section>
<a href="http://s.jf3q.com">click</a>
</body>




<script>


(function($) {
$.init();
/*---shengri*/
var shengri=document.getElementById("shengri");
shengri.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var picker = new $.DtPicker(options);
picker.show(function(rs) {
inputv("shenri_span",rs.text); 
picker.dispose();
});
}, false);
/*---shengao-----*/ 
var userPicker = new $.PopPicker();
userPicker.setData([{
value: '150-155com',
text: '150-155com'
}, {
value: '155-160com',
text: '155-160com'
}, {
value: '160-165com',
text: '160-165com'
}, {
value: '165-170cm',
text: '165-170cm'
}, {
value: '170-175cm',
text: '170-175cm'
}, {
value: '175-180cm',
text: '175-180cm'
}, {
value: '180-185cm',
text: '180-185cm'
}, {
value: '185-190cm',
text: '185-190cm'
}, {
value: '190cm以上', 
text: '190cm以上'
}]);
var showUserPickerButton = document.getElementById('shengao');

showUserPickerButton.addEventListener('tap', function(event) {
userPicker.show(function(items) {
inputv("shengao_span",items[0].value);
});
}, false);
/*---chengshi-----*/ 
var cityPicker3 = new $.PopPicker({
layer: 3
});
cityPicker3.setData(cityData3);
var chengshi = document.getElementById('chengshi');
chengshi.addEventListener('tap', function(event) {
cityPicker3.show(function(items) {
var city=items[0].text + " " + items[1].text + " " + items[2].text;
inputv("chengshi_span",city);
});
}, false);
})(mui);


</script>

</html>







相關文章