<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>设备询价</title>
<!--<script src="css/jquery/jquery-1.11.1.min.js"></script>-->
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/common.js"></script>
<script src="js/mui.picker.js"></script>
<link href="css/mui.picker.css" rel="stylesheet" />
<script src="js/mui.poppicker.js"></script>
<!--<script src="js/layer/layer.js"></script>-->
<link href="css/mui.poppicker.css" rel="stylesheet" />
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<style>
.active_radio{
background : #89c200;
color: #fff;
}
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav" style="background:#89c200;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#fff;" onclick="mui.back()" id="backbtn"></a>
<h1 class="mui-title" style="color:#fff; font-weight: bold;" >选择地区</h1>
</header>
<div class="mui-content">
<div id="area" style="margin-top:15px; text-align: center; margin-left: auto; margin-right: auto; right: 0; left: 0;" >
<button onclick="showArea()" id='showCityPicker3' class="mui-btn mui-btn-block mui-btn mui-icon mui-icon-arrowdown mui-right" type='button' style="padding:0; line-height: 45px; height: 45px; width: 95%;text-align: center; margin-left: auto; margin-right: auto; right: 0; left: 0;font-size: 17px">请选择项目所在区域</button>
</div>
</div>
<script type="text/javascript">
localStorage.areaid1 = null;
localStorage.areaid2 = null;
localStorage.areaid3 = null;
var cityPicker3,azfsPicker,rlPicker,showCityPickerButton,showAzfsPickerButton,showRlPickerButton;
//地区
cityPicker3 = new mui.PopPicker({
layer: 3
});
showCityPickerButton = document.getElementById('showCityPicker3');
//var cityResult3 = document.getElementById('cityResult3');
showCityPickerButton.addEventListener('tap', function(event) {
showArea();
}, false);
function showArea () {
//mui.toast('tap pressed');
showCityPickerButton.className = "mui-btn mui-btn-block mui-icon mui-icon-arrowdown mui-right active_radio";
//return;
cityPicker3.show(function(items) {
localStorage.areaid1 = items[0].value;
localStorage.areaid2 = items[1].value;
localStorage.areaid3 = items[2].value;
var an = '';
if((items[0] || {}).text == (items[1] || {}).text) {
if((items[2] || {}).text == (items[1] || {}).text) {
an = (items[0] || {}).text;
}
else {
an = (items[0] || {}).text + "" + (items[2] || {}).text;
}
}
else {
an = (items[0] || {}).text + "" + (items[1] || {}).text + "" + (items[2] || {}).text;
}
showCityPickerButton.innerText = an;
//返回 false 可以阻止选择框的关闭
//return false;
localStorage.areaname = an;
console.log("areaid3:" + localStorage.areaid3);
});
}
function plusReady(){
mui.init({
swipeBack: false,
beforeback: back
});
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
/*setTimeout(function () {
menu = mui.preload({
id: 'xjdh-menu',
url: 'xjdh-menu.html',
styles: {
left: "30%",
width: '70%',
zindex: 9997
}
});
},300);*/
cityPicker3.setData(cityData3);
//document.getElementById("offCanvasShow").addEventListener('tap',openMenu);
//点击侧滑图标，打开侧滑菜单；
//document.querySelector('.mui-action-menu').addEventListener('tap', openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向左滑动，若菜单未显示，则显示菜单；否则不做任何操作；
//window.addEventListener("swipeleft", openMenu);
//主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swiperight", closeMenu);
//menu页面向右滑动，关闭菜单；
window.addEventListener("menu:swiperight", closeMenu);
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</body>
</html>
2 个回复
DCloud_UNI_FXY
贴一下完整代码
地图 (作者)