国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

jQuery LocationSelect PluginByRobin | Posted inJavascript,jQuery | Taggedjquery,location,plugin,select |Comments (13) | Views(3,114) |Share最新版本的LocationSelect已經(jīng)將其與jQuery分離，但做了一個jQuery的適配器，可以和jQuery一起使用。而且現(xiàn)在可以支持任意級別聯(lián)動介紹用戶的地址選擇往往是網(wǎng)絡(luò)應(yīng)用中不可缺少的一部分，可是遇到了以下問題：地址數(shù)據(jù)難以收集 用戶選擇煩瑣，需要手動查找冗長的下拉菜單 難以維護地理數(shù)據(jù)以及重用組件LocationSelect插件具有以下特點，有效的解決了以上三個問題：基于廣泛使用的jQuery插件庫，輕易實現(xiàn)組件重用。你也可以選擇使用不使用任何腳本庫的版本。 地理數(shù)據(jù)整理來自國家公布數(shù)據(jù) 自動判斷用戶地理位置并進行最大努力的自動選擇 獨立的json數(shù)據(jù)源，可以方便的進行維護兼容性我測試過如下瀏覽器：Safari5、Safari Mobile（iOS 4.0.1）、Firefox3、IE6、IE7、IE8、Opera10演示一個在線演示可以在http://pagetalks.com/share/LocationSelect找到。該演示實現(xiàn)了一個自動探測用戶地理位置并自行選擇的標準案例。下載代碼寄存在GitHub ：http://github.com/RobinQu/LocationSelect-Plugin安裝(可選)引入jQuery腳本庫，目前腳本僅在1.4.2的jQuery中進行過調(diào)試，推薦大家使用。同時，還可以使用Google的CDN進行加速： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 由于需要用到JSON的解析器，腳本默認會調(diào)用JSON.parse方法來解析。如果你的項目里沒有定義JSON.parse方法，請引用JSON.org的腳本。 <script src="http://www.JSON.org/json2.js" type="text/javascript"></script> 現(xiàn)在已經(jīng)不用手動引入第三方腳本了。引入地理查詢引擎（可選）- 本腳本是使用Google Map API V2以及MAXMIND的Javascript API進行聯(lián)合查詢實現(xiàn)確定用戶地理信息的。隨著Google Map的反向地址解析更為強大后，腳本會考慮減少外部腳本的依賴性。目前如果您需要使用自動檢測功能，您必須引入這兩個腳本： <script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXX_YOUR_API_KEY_XXXX&sensor=false" type="text/javascript"> 引入LocationSelect的腳本文件 – <script type="text/javascript" src="LocationSelect.js"></script> 你應(yīng)該在生產(chǎn)環(huán)境中將調(diào)試信息關(guān)閉，LocationSelect.js中的第8行中 com.elfvision.DEBUG = true;改為 com.elfvision.DEBUG = false; 在DOM Ready事件后調(diào)用，通常您應(yīng)該傳遞響應(yīng)數(shù)目的Select對象： $(function() { $("select").LocationSelect({ name : "areas", labels :["請選擇一個省份或直轄市", "請選擇一個城市", "請選擇一個區(qū)"] });還可以選擇使用非jQuery的初始方法：var ls = new com.elfvision.kit.LocationSelect({ labels :["請選擇一個省份或直轄市", "請選擇一個城市", "請選擇一個區(qū)"], elements : $("select").get() });參數(shù)name (String) 必須默認： “areas.json” – json數(shù)據(jù)文件的地址，相對于當前頁面labels (Array) 必須每個菜單的默認標簽名，例如，["請選擇一個省份或直轄市", "請選擇一個城市", "請選擇一個區(qū)"]。注意該元素的數(shù)量決定聯(lián)動菜單中選項的數(shù)目，所以一定要為每個元素制定標簽。detectGeoLocation : (Boolean)默認： true – 是否自動檢測用戶地址并進行選擇listHelper : (ListHelper)默認： com.elfvision.kit.LocationSelect.ListHelper – 列表的工具類，該插件會使用次對象中的方法去加載對象、查詢列表項目等操作。傳入自定義的該對象可以進行該插件的深度定制。詳細內(nèi)容見后文。detector : (Function)默認： com.elfvision.kit.LocationSelect.GeoDetect – 自動探測方法。默認情況下會利用用戶IP查詢地理位置。如何定制有很多同學想要進行定制操作，從1.1版本開始，就已經(jīng)把大部分重要的算法給獨立到單獨的接口里面，方便大家定制。首先講一下這個插件的工作原理。

Sequence Diagram首先，插件會嘗試使用ListHelper的fetch方法去取回所有要用的數(shù)據(jù)文件。默認情況下會訪問ListHelper.dataUrl的地址，如果你不作任何配置，這個地址指向的是插件自帶的areas_1.0.json。當fetch方法返回之后，會執(zhí)行一個回調(diào)函數(shù)。這個回調(diào)函數(shù)里回進行列表的初始劃操作。當列表都初始化完成，控件就已經(jīng)可用了。如果自動探測的選項依然為true，就會繼續(xù)接下來的探測邏輯。插件內(nèi)置了根據(jù)IP判斷地理位置的探測算法。該算法是調(diào)用的Maxmind GEOCITY的API獲得用戶經(jīng)緯度，然后使用Google Map的Geocoder WebService根據(jù)經(jīng)緯度解析用戶地理信息。然后利用返回結(jié)果去對列表進行“選擇”。可以看到還有個YQL的參與，這是Google Map V3的WebService已經(jīng)不支持JSONP了，對跨域請求來說是噩夢。通過YQL作為一個Proxy返回的JSONP。下面開始介紹如何進行深度定制。首先上一張Class Diagram。

Class Diagram基本來說，通過定制所傳入的ListHelper對象detector函數(shù)來控制該插件的功能。

Interface ListHelperListHelper是一個列表的工具接口。默認的ListHelper采用了Singleton的模式，但你可以選擇不這么做。只要保證提供fetch和find方法即可。這兩個方法必須實現(xiàn)如下操作：fetch方法接受一個回調(diào)函數(shù)，在把所需要的JSON基本數(shù)據(jù)取得了之后就必須會被執(zhí)行。 find方法根據(jù)傳來level和id兩個參數(shù)對fetch方法獲得的數(shù)據(jù)進行查找進行記錄的查找，必須返回一個裝有記錄的數(shù)組。紀錄的數(shù)據(jù)結(jié)構(gòu)該插件對數(shù)據(jù)項的結(jié)構(gòu)有所規(guī)定。一個項目如下： {"id" : "112","text" : "Foobar"}注意該項目中所有的屬性均為字符串。levelevel的意義是標識進行find請求的是第幾個List。該插件中，前一個List的選項進行改變后會出發(fā)下一個List更新其內(nèi)容，那么查找的find方法必須知道前一個List的level。find方法被插件調(diào)用時會自動傳入level的值，該值從0開始計數(shù)。在插件默認的ListHelper里面，會調(diào)用一個find(-1)的請求，這是在請求第一個List的默認數(shù)據(jù)。插件默認狀況就是通過這個請求去請求“省份”的數(shù)據(jù)項目的。idid值即前一個List中被選項目的id值。你可以用fetch方法從后臺取得數(shù)據(jù)（不管是啥數(shù)據(jù)，只要復(fù)合數(shù)據(jù)項目的結(jié)構(gòu)規(guī)定）之后，根據(jù)這些數(shù)據(jù)實現(xiàn)find方法。你可以傳入的另外一個元素是detector函數(shù)。這個是執(zhí)行自動選擇的函數(shù)。默認的detector函數(shù)執(zhí)行了地理位置的探測，但你可以實現(xiàn)你自得探測算法。只要最終使用LocationSelect.select()方法選擇一組數(shù)據(jù)項。例如：that.select(["湖北省",“武漢市”]);這些值始終會根據(jù)List的傳入順序進行比對。如果List的數(shù)目大于給出的數(shù)組元素的數(shù)量，將不會對那些沒有對應(yīng)數(shù)值的List進行選擇；如果傳入的數(shù)值數(shù)組元素個數(shù)大于List個數(shù)，剩下的數(shù)組元素將會被拋棄。通過傳入自定義的ListHelper和detector，你可以完全自定義出類似于多級商品門類選擇之類的聯(lián)動菜單應(yīng)用。也就不局限于選擇一下地址而已了??更新日志1.0.0LocationSelect的第一個發(fā)行版本1.1.0LocationSelect的重寫版本，與jQuery獨立，改善性能。This entry was written byRobin, posted on March 22, 2010 at 2:10 pm, filed underJavascript,jQuery and taggedjquery,location,plugin,select. Bookmark thepermalink. Follow any comments here with theRSS feed for this post.Post a comment or leave a trackback:Trackback URL.