|
<!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 href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.picker.min.css" rel="stylesheet" />
<link href="../css/app.css" rel="stylesheet" />
<style>
html,body{height: 100%;margin:0;padding:0px;overflow: hidden;}
.mui-content{height:100%;overflow: auto;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav toptitbox">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
<h1 class="mui-title toptit">所在城市</h1>
</header>
<div class="mui-content">
<div class="mui-input-group mainbox">
<div class="infocontit infocontitM OnetitM">使用当前位置 </div>
</div>
<div class="mui-input-group mainbox">
<div class="infocontit infocontitM OnetitM mui-navigate-right mui-clearfix" id="showCityPicker">
<span class="mui-pull-left">省市</span>
<span class="rightword" id="cityResult">北京市-北京市</span>
</div>
</div>
<div class="mui-content-padded frmboxNew">
<button id="login" class="mui-btn mui-btn-block frmbtn frmactive">保存</button>
</div>
</div>
<script src="../js/public/mui.min.js"></script>
<script src="../js/public/mui.picker.min.js"></script>
<script src="../js/public/city.data.js"></script>
<script src="../js/public/base.js"></script>
<script type="text/javascript">
//处理iOS下弹出软键盘后头部会随页面的滚动条消失问题
iosheader();
(function($, doc) {
$.init();
$.ready(function() {
//级联示例
var cityPicker = new $.PopPicker({
layer: 2
});
cityPicker.setData(cityData);
var showCityPickerButton = doc.getElementById('showCityPicker');
var cityResult = doc.getElementById('cityResult');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
cityResult.innerText = items[0].text + "-" + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
});
})(mui, document);
</script>
</body>
</html>
|
