利用jQuery實現移動端選擇省市區代碼



18 70 24



特效描述:利用jQuery實現 移動端 選擇省市區 代碼,利用jQuery實現移動端選擇省市區代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/area.css">

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.area.js" type="text/javascript" charset="utf-8"></script>

3. HTML代碼

<div class="ui-form-item ui-border-b">
	<label>單位地址</label>
	<div class="ui-select">
		<input id="expressArea" data-name="custUa" data-required="true" data-label="單位地址" placeholder="選擇省市區" readonly style="padding-left:0;">
	</div>
	<div class="browser">
		<!--選擇地區彈層-->
		<section id="areaLayer" class="express-area-box">
			<header>
				<h3>選擇省市區</h3>
				<div class="selet-area-wrap">
					<p><span class="one"></span></p>
					<p><span class="two"></span></p>
					<p><span class="three"></span></p>
				</div>
				<div class="hot-city">
					<p>熱門城市</p>
					<ul>
						<li onClick="selectPP(0,1)">北京</li>
						<li onClick="selectPP(10,1)">上海</li>
						<li onClick="quickselectC(18,0)">廣州</li>
						<li onClick="quickselectC(18,1)">深圳</li>
						<li onClick="quickselectC(12,0)">杭州</li>
						<li onClick="quickselectC(11,0)">南京</li>
						<li onClick="quickselectC(11,4)">蘇州</li>
						<li onClick="selectPP(1,1)">天津</li>
						<li onClick="quickselectC(16,0)">武漢</li>
						<li onClick="quickselectC(17,0)">長沙</li>
						<li onClick="selectPP(21,1)">重慶</li>
						<li onClick="quickselectC(22,0)">成都</li>
					</ul>
					<p>選擇省份/地區</p>
				</div>
				<a id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
				<a id="closeArea" class="close" href="javascript:void(0)" title="關閉"></a>
			</header>
			<article id="areaBox">
				<ul id="areaList" class="area-list"></ul>
			</article>
		</section>
		<!--遮罩層-->
		<div id="areaMask" class="mask"></div>
	</div>
</div>
<div class="ui-form-item ui-border-b">
	<label>居住地址</label>
	<div class="ui-select">
		<input id="expressArea1" data-name="custRa" data-required="true" data-label="居住地址" placeholder="選擇省市區" readonly style="padding-left:0;">
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 提示框/彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 3d字迷 360排列三走势图 青柠影咖赚钱吗 澳门赌钱的真实经历 天天福建十三水官网 英雄联盟直播 楚天30选5开奖 幸运28全包稳赚投注 加拿大快乐8走势图 广东快乐十分一定牛 天津时时彩开奖结果表 东森娱乐平台 支付宝做兼职赚钱是真的吗 过去做无本赚钱商机 pc蛋蛋稳赚投注法 新浪购彩大厅