Tag for jquery

jQuery Plugin – 台灣郵遞區號 3+2 版本

Posted by essoduke - 2010 年 08 月 31 日 21:28:52 - 17 User Views
 

twzipcode32

自從 3 碼版本釋出後，就有詢問 3+2 版本的可能性，考慮到當時惰性發作所以一直沒有動工，直到這次狠下心來直接改寫才有雛型產生。

這個版本主要是使用中華郵政所提供的 XML 並以縣市為單位分成數十個 json，用 Ajax 方式以期效能上不會拖累太多。

基本功能如同舊版一樣，也加上了 1.3 之後更新的手動輸入功能，不過 3+2 改為符合的縣市路名單一號碼有多筆記錄對應時，僅列出符合的記錄。

目前僅測試於 IE8/ Firefox 3.6 / Google Chrome 5

jQuery Plugin – 台灣郵遞區號 3+2 版本

–
年底縣市合併後勢必會再改版，所以現在是做心酸的 XD

jQuery 台灣郵遞區號外掛 v1.3

Posted by essoduke - 2010 年 08 月 25 日 20:48:49 - 46 User Views

twzipcode v1.3 加入了輸入郵遞區號取得縣市名稱的功能，以及 zipSel, zipReadonly 兩個選項。

下載位址：

jQuery 台灣郵遞區號外掛 v1.2

Posted by essoduke - 2010 年 03 月 24 日 23:05:20 - 265 User Views

台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery

這個版本修正了在 IE6 下，鄉鎮市區清單只會出現一個的問題：

也順便把清單過長的現象給解決了

※ 感謝 呆呆怡 和 Kenneth 的回報

tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件

Posted by essoduke - 2009 年 10 月 29 日 20:53:04 - 758 User Views

這個擴充套件可以輕鬆建立自訂的 Google Map，舉凡尺寸、地圖類型和縮放控制、縮放等級，更能加入設定好的標記地點並填上說明。

下載位址

安裝

  1. <!-- Include Google Map API --> 
  2. <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<em>YOUR_API_KEY"></script> 
  3. <script type="text/javascript" src="jquery.tinymap-1.0.js"></script>

參數說明

  • width: 地圖寬度 (Number) /* 預設：640px */
  • height: 地圖高度 (Number) /* 預設：480px */
  • latlng: 地圖置中的座標或地址，若為座標請使用 [x, y]，地址則直接輸入。
  • control: 顯示地圖類型選單 (Boolean) /* 預設：true */
  • zoom: 顯示地圖縮放選單 (Boolean) /* 預設：true */
  • zoomLevel: 預設地圖縮放等級 (Number) /* 預設：13 */
  • mapType: 預設地圖類型 (String) /* 選項：default, hybrid（混合）, satellite（衛星） 預設：default */
  • marker: 標記群組 (JSON)：

    [{addr:'標記地址或座標', text:'標記說明', icon:[圖示寬度, 圖示高度, 圖示位址]}]

範例：顯示高雄市政府地圖

若無法顯示 Object Frame 內容，請使用 IE 以外的瀏覽器。

  1. $(function(){
  2.  
  3.   var set1 = {
  4.     width: 639,
  5.     height: 359,
  6.     latlng: '高雄市苓雅區四維三路2號',
  7.     zoomLevel: 1˙
  8.   };
  9.  
  10.   $('#map1').tinymap( set1 );
  11.  
  12. });

範例：以衛星地圖及自訂圖示標示多個地點

若無法顯示 Object Frame 內容，請使用 IE 以外的瀏覽器。

  1. $(function(){
  2.  
  3.   var set1 = {
  4.     width: 639,
  5.     height: 359,
  6.     latlng: [22.638610116646756, 120.30184864997864],
  7.     mapType: 'satellite',
  8.     zoomLevel: 12,
  9.     marker: [
  10.       {addr:'高雄市鼓山區萬壽路350號', text:'<strong>壽山動物園</strong><br />高雄市鼓山區萬壽路 350 號', icon:[24, 24, '2.png']},
  11.       {addr:'高雄市左營區翠華路1435號', text:'<strong>蓮池潭</strong><br />高雄市左營區翠華路 1435 號', icon:[24, 24, '3.png']},
  12.       {addr:'高雄市苓雅區自強三路5號', text:'<strong>東帝士 85 大樓</strong><br />高雄市苓雅區自強三路 5 號', icon:[24, 24, '4.png']},
  13.       {addr:'高雄市左營區高鐵路105號', text:'<strong>台灣高鐵左營站</strong><br />高雄市左營區高鐵路 105 號', icon:[24, 24, '5.png']},
  14.       {addr:'高雄市三民區建國二路318號', text:'<strong>台鐵高雄車站</strong><br />高雄市三民區建國二路 318 號<br /><a href="http://service.tra.gov.tw/Kaohsiung/StationTimeTable/index.aspx">台鐵高雄車站</a>', icon:[24, 24, '6.png']}
  15.     ]
  16.   };
  17.  
  18.   $('#map1').tinymap( set1 );
  19.  
  20. });

更多範例請參考：tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件

jQuery 台灣郵遞區號外掛 v1.1 update

Posted by essoduke - 2009 年 10 月 29 日 20:05:20 - 591 User Views

這次更新主要是改寫了原有的結構變得更簡潔、效能更好，並修改下列幾項：

  • 可不需先建立 HTML 表單，由程式直接產生並直接指定表單元件名稱。
  • 加入 Css 的支援

參數說明

  • countyName: 指定縣市下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_county[] */
  • areaName: 指定鄉鎮市區下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_area[] */
  • zipName: 指定郵遞區號輸入框名稱 (String) /* 若不指定則預設名稱為 zip_code[] */
  • countySel: 縣市預設值 (String)
  • areaSel: 鄉鎮市區預設值 (String)
  • css: ['County ClassName', 'Area ClassName', 'Zip ClassName'] (Array)

自訂元件名稱範例

  1. // Javascript
  2. $('#container').twzipcode({
  3.   countyName: 'county',
  4.   areaName: 'area',
  5.   zipName: 'zip'
  6. });
  7.  
  8. // HTML
  9. <div id="container"></div>

完整範例請參考：jQuery 台灣郵遞區號外掛

Pages: 1 2 3 4 Next

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.