本身編寫的仿京東移動端的省市聯動選擇JQuery插件

概述

什麼是插件，插件就是即插即用叫插件，不多的配置，不多的代碼就能夠用都項目裏，之因此作這個插件，是由於作了一個省市區的聯動，其餘項目若是要用怎麼辦，難道在ctrl+c，ctrl+v？那樣作太low，作個插件吧，因而乎就開始了Jquery插件製做之旅。

 

使用效果

 

獲取使用

代碼開源，已經託管在git上，地址以下，但願你們賞臉給個星

https://gitee.com/jangojing/JqueryCitySelectPlug

 

1.引入js、css和移動端的meta

引入jquery版本無所謂，demo裏的版本較老，就懶得換了，其次引入插件對應的js和css

加入移動端的meta是移動端開發的前提

        <script src="Scripts/jquery-1.4.1.min.js"></script>
	<script src="Scripts/CitySelect/citySelectPlug.js"></script>
	<link rel="stylesheet" href="Scripts/CitySelect/citySelectPlug.css" type="text/css" />
　　　　 <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

 

2.編輯html綁定jquery事件

html裏放入一個input，用jquery綁定一個jquery事件

	<form action="submit.aspx" method="GET">
	請選擇省市區:<br />
	<input type="text" name="citySelect" value="" id="citySelect" />
	<input type="submit" value="提交" />
	</form>      
        <script>
		$().ready(function () {
			$("#citySelect").citySelectPlug({ ajaxUrl: 'GetArea.ashx' });
		});
	</script>

 

3. 處理ajax請求

注意到這裏有個ajaxUrl，這個是配置你項目的ajax請求的路徑的。既然要作聯動，確定須要ajax請求，經過當前選擇的id去找下一級的id。

ajax請求會調用對應的地址，攜帶id爲參數，id就是用戶點擊的那個省的id或者市的id，根據這個id繼續找下一級

這裏ajax請求須要返回的結果是json格式的數據以下所示：

[{"ID":606,"Name":"市轄區"},{"ID":123,"Name":"高淳區"},{"ID":234,"Name":"鼓樓區"}]

包含id和name的數組。

 

4. 完了？　　

就這樣就完了？ 是的，插件就是少許的配置，少許的代碼，即插即用。

 

5. 兼容性申明

手邊的設備不全，測試過的設備有iphone 6s,iphone 5s,華爲P8，華爲榮耀3臺，一款很老的HTC，努比亞一臺。

針對ios處理了輸入框得到焦點自動居中的問題。

針對華爲手機處理了鍵盤打開狀態下觸發屏幕可見範圍高度不夠致使彈出層高度只有半幅頁面的問題。