概述
什么是插件,插件就是即插即用叫插件,很少的配置,很少的代碼就可以用都項目里,之所以做這個插件,是因為做了一個省市區的聯動,其他項目如果要用怎么辦,難道在ctrl+c,ctrl+v?那樣做太low,做個插件吧,于是乎就開始了Jquery插件制作之旅。
用js如何實現省市聯動,?
使用效果
html制作京東快速購物導航、?
獲取使用
代碼開源,已經托管在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處理了輸入框獲得焦點自動居中的問題。
針對華為手機處理了鍵盤打開狀態下觸發屏幕可見范圍高度不夠導致彈出層高度只有半幅頁面的問題。
?