city.htmljavascript
仿每日優鮮：城市佈局設置css
<!DOCTYPE html>
<html>html
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: rgba(38, 38, 38, 0.7);
}java
header {
width: 100%;
height: 96px;
}api
header .title {
width: auto;
color: #fff;
box-sizing: border-box;
margin: 0 32px;
padding-bottom: 20px;
padding-top: 64px;
text-align: center;
border-bottom: 2px solid rgb(218, 1, 107);
}佈局
ol {
width: 100%;
text-align: center;
}.net
ol .city {
margin-top: 20px; //距離上方像素
width: 100%;
height: 20px;
line-height: 30px;
color: #fff;
font-size: 15px;
}
</style>
</head>scala
<body>
<header>
<div class="title">選擇所需服務的地區</div>
</header>
<ol id="myol">
<!-- <li class="city" tapmode οnclick="setCity()">長沙市</li>
<li class="city">西安市</li>
<li class="city">海口市</li>
<li class="city">文昌市</li>
<li class="city">南京市</li>
<li class="city">廈門</li> -->
</ol>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var citys = [];
apiready = function() {
//獲取城市
citys = ["長沙市", "西安市", "北京市", "成都市", "南京市", "廈門市"];
var ol = $api.byId('myol');
var olHtml = ''; //ol的內容
//根據城市數量建立li
for (var i = 0; i < citys.length; i++) {
olHtml += '<li class="city" tapmode οnclick="setCity(' + i + ')">' + citys[i] + '</li>';
}
$api.html(ol, olHtml); //給ol拼接內容
};htm
function setCity(index) {
/*獲取當前選中的城市*/
/*將城市傳回主界面*/
api.sendEvent({
name: 'cityName',
extra: {
city: citys[index]
}
});
/*關閉當前frame*/
api.closeFrame({
name: 'city'
});blog
}
</script>
</html>