Tag for javascript

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

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

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

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

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

※ 感謝 呆呆怡 和 Kenneth 的回報

我的常用 js 函式庫

Posted by essoduke - 2010 年 02 月 26 日 12:11:16 - 318 User Views

※ 2010-03-02 補充：

Object prototype 改寫會導致 jQuery 出現異常，所以必須將 Object.prototype.isArray 註解或刪掉。
請參考：Prototyping Object in Javascript breaks jQuery? – StackOverflow

整理了一支我常用於網站開發的 js 函式庫，也包含了對字串、日期、陣列物件的 Prototype 增強函數，採 MIT 授權釋出，歡迎任意使用。

源碼：lib.common.js（16 KB）
壓縮：lib.common-min.js（9 KB）

Prototype: String

  1. var url = 'http://essoduke.org/?s=測試';
  2. var x = 'Test 測試';
  3. var y = '<strong>HTML</strong>';
  4. var z = '&;lt;strong&;gt;HTML&lt;/strong&gt;';
  5.  
  6. /* trim: 移除字串前後空白 */
  7. x.trim(); // result: Test
  8.  
  9. /* bytes: 取得字串 bytes 長度 */
  10. x.bytes(); // result: 9
  11.  
  12. /* empty: 是否為空 */
  13. x.empty(); // result: false
  14.  
  15. /* left: 取字串左側 n 個字元 */
  16. x.left(4); // result: Test
  17.  
  18. /* right: 取字串右側 n 個字元 */
  19. x.right(4); //result: t 測試
  20.  
  21. /* HTMLEncode: 編碼 HTML 標籤 */
  22. y.HTMLEncode(); // result: &amp;lt;strong&amp;gt;HTML&amp;lt;/strong&amp;gt;
  23.  
  24. /* HTMLDecode: 還原被編碼的 HTML 字串 */
  25. z.HTMLDecode(); // result: <strong>HTML</strong>
  26.  
  27. /* URLEncode: 進行 URL 編碼 */
  28. url.URLEncode(); // result: http%3A%2F%2Fessoduke.org%2F%3Fs%3D%E6%B8%AC%E8%A9%A6

Prototype: Array

  1. var arr = [1, 2, 2, 3, 4, 4, 5];
  2.  
  3. /* unique: 刪除重複的元素 */
  4. arr.unique(); // result: 1, 2, 3, 4, 5
  5.  
  6. /* remove: 刪除第 n+1 個元素 */
  7. arr.remove(3); // result: 1, 2, 2, 4, 4, 5
  8.  
  9. /* find: 尋找符合內容元素的鍵值 */
  10. arr.find(2); // result: 1, 2

Prototype: Date

  1. var x = new Date();
  2.  
  3. /*
  4. * DateDiff: 計算傳入日期的差異
  5. * @param string cDate : 要比較的日期
  6. * @param string mode: 計算類型 y=年, m=月, w=周, d=日
  7. */
  8. x.DateDiff('2010-01-01', 'd'); // result 56
  9.  
  10. /* DateAdd: 加上或減去指定的日期時間間隔
  11. * @param string interval : 時間間隔單位 y, m, d, w, h, n, s, l
  12. * @param integer numer: 時間間隔單位次數，可為正數或負數
  13. * @param string pattern: 回傳的時間格式（非必要，預設 'yyyy-MM-dd hh:mm:ss'）
  14. */
  15. x.DateAdd('d', 100); // result '2010-06-06 11:21:47'
  16.  
  17. /*
  18. * format: 格式化日期
  19. * @param string interval : 引數可參考 http://php.net/manual/en/function.date.php
  20. */ 
  21. x.format('Y m j'); // result '2010-02-26'

Prototype: Object

  1. /* isArray : 判斷是否為陣列 */
  2. var x = [1, 2, 3];
  3. x.isArray() // result 'true'
  4. var x = 'Test';
  5. x.isArray() // result 'false'

Functions

  1. var web = new COMMON();
  2.  
  3. /* regexp: 驗證常用欄位 account, password, email, url, ip, date, time, number, twid 台灣身份證 */
  4. web.regexp('i.am@god.com', 'email'); // 驗證電子郵件
  5. web.regexp('http://test.com', 'url'); // 驗證網址
  6. web.regexp('10.10.10.10', 'ip'); // 驗證 IP
  7.  
  8. /* timestamp2time: 將 timestamp 轉為時間日期格式 */
  9. web.timestamp2time(1267155821); // result 'Fri Feb 26 2010 11:46:30 GMT+0800 (Taipei Standard Time)'
  10.  
  11. /* timestamp: 取得 timestamp */
  12. web.timestamp();
  13.  
  14. /* leftPad: 字串左邊補零 */
  15. web.leftPad('100', 6); // result '000100'
  16.  
  17. /* ie: 檢查是否為 IE */
  18. web.ie();
  19.  
  20. /*
  21. * benchmark: 效能測試
  22. */
  23. web.benchmark.start(); // 開始計算
  24. [.....]
  25. web.benchmark.stop(); // 結束計算並返回執行秒數
  26.  
  27. /*
  28. * cookie: cookie 操作
  29. */
  30. web.cookie.get('index'); // 取得 cookie[index] 內容
  31. web.cookie.set('index', '100'); //設置 cookie[index] 為 100
  32. web.cookie.remove('index'); // 移除 cookie[index]
  33.  
  34. /*
  35. * debug: inline 方式顯示傳入變數內容或列舉子物件
  36. * ※此方法需使用 <a href="http://jquery.com/">jQuery Library</a>，建議 1.3.2 以上版本
  37. */
  38. var x = 'String';
  39. web.debug(jQuery); // 列舉 jQuery 所有內容
  40. web.debug(x); //顯示 x 變數內容

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 台灣郵遞區號外掛

將國際化（i18n）導入 javascript

Posted by essoduke - 2009 年 10 月 26 日 22:09:08 - 589 User Views

源碼：http://app.essoduke.org/i18n/i18n.js
展示：http://app.essoduke.org/i18n/

若您的瀏覽器不支援 Object Frame 顯示，請點選上列的展示連結。

以往進行 javascript 多國語言的開發總是比較麻煩，所以就著手進行了這方面的嘗試。
因為 Javascript 判別 HTTP_ACCEPT_LANGUAGE 會有失誤的問題，所以偵測語系交由後端程式負責，並將此參數以 inline 方式傳入 js。

安裝

  1. <script type="text/javascript" src="i18n.js"></script>
  2. <script type="text/javascript">
  3. var lang = '< ? get_user_language(); ?>';
  4. var i18n = new I18N(lang);
  5. </script>

使用

  1. ///以正體中文語系為例
  2. //無參數字串
  3. i18n._('Current Datetime: '); //輸出「目前時間：」
  4. //傳入單一參數
  5. i18n._('I have %1 books', 10); //輸出「我有 10 本書」
  6. //傳入多個參數
  7. i18n._('I have %1 books and %2 pens', 10, 20); //輸出「我有 10 本書和 20 支筆」
  8. ///若在字串表內找不到所傳入的值，將會回傳原始字串*/
  9. i18n._('This line isn\'t listing in the language file.') //輸出「This line isn't listing in the language file.」

語系設置

  1. var localize = {
  2.   //正體中文
  3.   'zh-tw': {
  4.  
  5.     //欄位：[GMT 時區, 日期時間格式, 上午符號, 下午符號]
  6.     //日期格式可參照 PHP date() 函式
  7.     'setting': [8, 'Y 年 m 月 d 日 (D) H:i:s', '上午', '下午'],
  8.  
  9.     //System Translate 必要字串
  10.     'shortMonths': ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
  11.     'longMonths': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  12.     'shortDays': ['日', '一', '二', '三', '四', '五', '六'],
  13.     'longDays': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  14.  
  15.     //User Translate 自訂字串
  16.     'Go': '衝',
  17.     'Current Datetime: ': '現在時間：',
  18.     'This is a book': '這是一本書',
  19.     'I have %1 books': '我有 %1 本書',
  20.     'I have %1 books and %2 pens': '我有 %1 本書和 %1 支筆'
  21.   }
  22. }

這次的實做也包括了日期格式、時區等自動轉換，預計之後再導入數字、貨幣、小數點等設置。

  1. //依照語系設定的日期格式輸出目前時間（Y 年 m 月 d 日 (D) H:i:s）
  2. i18n.datatime(); //輸出「2009 年 10 月 26 日 (一) 00:00:00 」
  3.  
  4. //依照語系設定的日期格式輸出自訂時間（Y 年 m 月 d 日 (D) H:i:s）
  5. i18n.datatime('2009/10/26 00:01:02') //輸出「2009 年 10 月 26 日 (一) 00:01:02」

附上 PHP 取得 HTTP_ACCEPT_LANGUAGE 的函數

  1. //因為 IE 和 Firefox 所取得的值不同，所以需要再處理成相同的字串
  2. function get_client_language(){
  3.   preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $lang);
  4.   $result = strtolower($lang[1]);
  5.   switch(TRUE){
  6.     case ($result == 'en' || $result == 'en-us' || $result == 'en-uk'): $result = 'en-is'; break;
  7.     case ($result == 'zh'): $result = 'zh-tw'; break;
  8.   }
  9.   return $result;
  10. }
Pages: 1 2 3 4 5 Next

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