Tag: jquery

jQuery tinyMap v3.2 release

2015 年 06 月 17 日

前一陣子釋出了 v3.2 版本，也順便更新了套件網站，除了讓網站讀取更為順暢，也將使用文件做了大幅度更動。 GitHub jQuery tinyMap v3.2 最主要的更新有：不再需要手動引入 Google Maps API 以及 markerclusterer 函式庫了。可自訂路徑規劃各中繼點的圖示。支援原生 directions 參數。支援原生 kml 參數。支援原生 markerCluster 參數。支援 Places API。更有彈性的 clear 清除方法。全新的 get 方法，讓獲取圖層更彈性及簡單。(v3.2.3) 修正錯誤。 get 方法使用範例 // 取得所有圖層 var layers = $(selector).tinyMap('get'); // 取得指定圖層 var layer = $(selector).tinyMap('get', 'marker'); // 取得多個圖層 var layer = […]

技術文章

jQuery tinyMap 進階應用

2014 年 08 月 05 日

essoduke chang

google maps, jquery, tinymap

五年來，jQuery tinyMap 已邁入 v2.8.4，期間也是因為有許多網友們的建議，才能有逐漸成型的今日，就連 Facebook 分享數都突破了 300 大關，真是深感意外。所以我整理了幾個比較特殊的問題並整理成範例讓更多人可以參考。找出距離最近的標記可以利用 Google Maps API 提供的幾何圖形程式庫來計算各點與目前的直線距離。要使用該程式庫，在引入 API 時需加上 libraries=geometry 參數： <script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> 在 Map Idle 事件內用迴圈逐一比對各標記與某點之間的距離，並將所得結果（公尺）存入陣列，再找出陣列最小值的索引值即可。

技術文章, 軟體分享

jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin

2013 年 07 月 30 日

essoduke chang

api, google, javascript, jquery, map, plugin

jQuery tinyMap 是一款可以輕鬆在網頁上建立 Google Map 的 Plugin。最新版本: 2.7.0 (2014-05-22) jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin GitHub – jQuery tinyMap

技術文章

jQuery TWzipcode32: 3+2 郵遞區號 Plugin 測試

2013 年 07 月 19 日

essoduke chang

jquery, plugin, 郵遞區號

雖然這個 plugin 似乎沒什麼需求，畢竟可以查詢的資源太多，不過還是口嫌體正直地試著實做了。實做難度在於把資料正規化，以及為了異步讀取必須把資料檔縮小，這部份對照之前的 1.0 版倒是足足縮減成 1/6。正規化方面最麻煩，雖然測試過幾個地址都正確無誤，但是我對於查詢結果實在是沒什麼信心 XD（希望有人能提點一下查詢網站怎麼做的）最後就是希望操作流程能更方便，因此捨棄之前很蠢的地址下拉方式，改為直接讓使用者輸入地址（惟縣市和鄉鎮市區暫時採用清單）會更為直觀。這個 beta 用到的所有檔案都能夠下載，若發現有任何錯誤或能改進的地方，請務必鞭策！

技術文章, 資訊科技

jQuery pasttimes: 計算已經消逝的時間

2011 年 10 月 29 日

essoduke chang

facebook, jquery, 臉書

仿製 Facebook 塗鴉牆上各個訊息的貼文經過時間，例如 3 分鐘前、1 小時前或 4 天前的自動計算功能。完整範例參考: jQuery pasttime: 計算已經消逝的時間圖例

技術文章, 資訊科技

jQuery checkbox 全選+變色: 挑戰最簡寫法

2011 年 10 月 28 日

essoduke chang

checkbox, jquery

前言以往寫這種功能似乎都要寫好幾行，儘管有了 jQuery 加持，也是會把事件都綁定到主控的 checkbox 再做處理，結構上略顯混亂及累贅，所以這次來挑戰看看是不是有比較直覺、結構清楚又兼顧效能的寫法。 jsFiddle Online Test

喃喃自語, 黑特爆發

你敢自稱是網頁設計師？

2011 年 10 月 19 日

essoduke chang

css, framework, html, javascript, jquery, php

之前在 Mobile01 就有這個主題討論串「設計師就設計師為什麼要叫美工呢?」，本人理所當然地戰下去… 不說結論，單以最簡單的網頁設計來說，和我合作過的不下十人，只是每個幾乎都沒底子；難道真的只要會 Photoshop 合成圖庫、Dreamweaver 拉 HTML 就可以自稱設計師？

技術文章, 資訊科技

[更新] jQuery 台灣郵遞區號套件 1.4.1

2011 年 10 月 12 日

essoduke chang

jquery, plugin, twzipcode

1.4.1 (Oct 12, 2011) 新增參數 detect 可偵測用戶位置 (需載入 Google Maps API, 僅適用 IE9/Firefox 3.x/Chrome/Opera 10.5/Safari 4) Demo: 台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery 要使用新功能必須先載入 Google Maps API <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 然後加入 detect 參數並設為 true 即可 $(function () { $(selector).twzipcode({ detect: true }); }); 當瀏覽器偵測到地理位置請求時會在上方出現: 確認後再重整一次網頁即可看到偵測結果。附註說明 Geolocation API 屬於 HTML5 的規格，所以瀏覽器僅支援 IE9/Google Chrome/Safari […]

技術文章

jQuery Fancybox with Sortable click event prevent

2011 年 06 月 03 日

essoduke chang

fancybox, jquery

使用 lightbox 時，預設都是點擊就開啟效果，如果需搭配 draggable, droppable 或 sortable 等需要點擊拖曳的效果時，就會發生拖曳卻一直開 lightbox 的窘境。參考了 An Awesome CSS3 Lightbox Gallery With jQuery 後，發現簡易解法（以 jQuery UI Sortable 為例）：建立 preventClick 變數決定是否需遮蔽事件在開始拖曳時的 start 事件將此變數設為 true（遮蔽）拖曳停止時變數設為 false（不遮蔽） var preventClick = false; //覆寫 fancybox Click event jQuery('a.fancybox').bind('click', function(e){ if (preventClick) { e.stopImmediatePropagation(); e.preventDefault(); } }); //建立 sortable jQuery('#sortable').sortable({ start: function () […]

技術文章

jQuery Plugin Weather

2011 年 05 月 18 日

essoduke chang

javascript, jquery, 程式設計

測試上一版的 deferred object，搭配 worldweatheronline.com API。 $('#weather').weather({ key: 'API key', //worldweatheronline.com API Key query: 'kaohsiung,taipei', //英文城市名稱，使用半形逗號可列出多個位置 html: true/false, //是否輸出 html，預設 true unit: 'C/F', //溫度單位 C 攝氏, F 華氏，預設 'C' lang: 'en/tw', //語系 en 英文, tw 中文，預設 'tw' success: function (resp) {} //回傳氣象物件 }); Demo

技術文章

[更新] jQuery 台灣郵遞區號套件 1.4

2011 年 04 月 27 日

essoduke chang

javascript, jquery, twzipcode, zipcode, 郵遞區號

jQuery 台灣郵遞區號套件更新至 1.4：修改原始碼以符合 jslint.com 驗證修改參數名稱 areaName => districtName, zipName => zipcodeName, areaSel => districtSel, zipSel => zipcodeSel, zipReadonly => readonly 修正當指定元素名稱時，若名稱內包含 [] 會發生錯誤的情形。加入 destroy, reset, serialize 等方法更新 Creative Commons License 至 3.0 $(function(){ $('#zipcode-1').twzipcode(); $('#zipcode-2').twzipcode({ zipcodeSel: 830, readonly: false }); $('button').click(function(){ var result = $('#' + $(this).val()).twzipcode($(this).text()); if ('serialize' === $(this).text()) […]

技術文章

Clone object using jQuery.extend() in javascript

2011 年 03 月 08 日

essoduke chang

javascript, jquery

在 Javascript 中，如何複製物件？一般情況下都會想使用 = 的方式來複製，不過可能會得到以下結果： var obj = {'a': 1, 'b': 2}; var new_obj = obj; new_obj.c = 3; //result obj = {'a': 1, 'b': 2, 'c': 3};

技術文章, 資訊科技, 軟體分享

tinyMap 2.0 jQuery Plugin

2010 年 09 月 08 日

essoduke chang

google, jquery, map, plugin, tinymap

自從研究 Plurk API 失敗後，也剛好 Google Map API Javascript v3 已釋出一段時間，索性這次整個改寫 tinyMap。 Demo: tinyMap 2.0 jQuery Plugin 2.0 版的特色：使用 Google Map API v3 改寫加入路徑規劃功能延伸閱讀： tinyMap – 自訂個人Google Map 的jQuery 擴充套件

技術文章, 資訊科技, 軟體分享

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

2010 年 08 月 31 日

essoduke chang

jquery, twzipcode, zipcode, 郵遞區號

自從 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

2010 年 08 月 25 日

essoduke chang

jquery, twzipcode, zipcode, 郵遞區號

twzipcode v1.3 加入了輸入郵遞區號取得縣市名稱的功能，以及 zipSel, zipReadonly 兩個選項。下載位址： twzipcode-1.3.js (14 KB)

技術文章, 資訊科技

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

2010 年 03 月 24 日

essoduke chang

javascript, jquery, twzipcode, 郵遞區號

台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery 這個版本修正了在 IE6 下，鄉鎮市區清單只會出現一個的問題：也順便把清單過長的現象給解決了 ※ 感謝呆呆怡和 Kenneth 的回報

技術文章, 軟體分享

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

2009 年 10 月 29 日

essoduke chang

javascript, jquery, plugin, twzipcode, zipcode, 郵遞區號

這次更新主要是改寫了原有的結構變得更簡潔、效能更好，並修改下列幾項：可不需先建立 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) 自訂元件名稱範例 // Javascript $('#container').twzipcode({ countyName: 'county', areaName: 'area', zipName: 'zip' }); // […]

技術文章

JSONP 實做：使用 Google Ajax Search

2009 年 07 月 14 日

essoduke chang

ajax, javascript, jquery, json

範例網頁：JSONP 實做：使用 Google Ajax Search ※ 詭異的是，我使用 $.get 都只能收到 400 Bad Request，只能用 $.ajax 才能正常。 $.ajax({ url: 'http://ajax.googleapis.com/ajax/services/search/web', data:{ 'key': gsearch.key, 'v': '1.0', 'q': encodeURIComponent(k), // + '+site:essoduke.org' 搜尋網站, 'rsz': 'large', 'hl': 'zh-TW', 'start': s }, dataType: 'jsonp', success: gsearch.fetch }); 參考資料：開發人員指南 – Google AJAX 搜尋 API – Google Code 基礎搜尋物件 – Google AJAX Search […]

技術文章

Windows Media Player for Web

2009 年 07 月 03 日

essoduke chang

javascript, jquery

※剛剛發現我的 Firefox 不能正常運作，大概是 Plugin 的關係。 http://app.essoduke.org/mplayer Feature / 特色相容 IE/Firefox 瀏覽器使用 JSON 格式媒體列表可顯示媒體名稱、時間軸、已播放/媒體時間可音量控制、重複播放、拖曳播放清單 Defect / 缺點 Opera / Safari 無法正常使用未加入隨機播放功能 Point / 重點摘要雖然已經有了支援各瀏覽器的播放語法，不過我還是針對了非 IE 瀏覽器建立 embed 標籤。播放器使用 Javascript 產生，並且將所有事件都寫成物件化，整個播放器就是一個物件。時間軸採用 setInterval 的方式每秒查詢目前的播放時間，換曲時要用 clearInterval 不然久了 IE 會當掉… XD Firefox 監控 PlayStateChange 事件要使用 OnDSPlayStateChangeEvt function。播放清單要雙擊左鍵才會換曲！大概就醬了

技術文章, 資訊科技

[jQuery] 自動替表單元素加入 label for 屬性

2009 年 06 月 02 日

essoduke chang

javascript, jquery

通常在設計網頁時如果有包含表單元素，大多會使用 Label 標籤來定義說明，但是每個表單元素和 Label 標籤都要加上 id 和 for 屬性顯得有點麻煩，所以下列函式就是用來替這些元素自動補上 for 和 id 屬性。範例：http://beboss.idv.tw/autolabel.php 目前只抓取 label 前後的表單元素，若 label 和表單元素之間有其他標籤則無作用，交給大家去解決吧 XD $(function(){ AutoLabel(); }); var AutoLabel = function(){ $('label').each(function(n){ //get the next object var $obj = $(this).next(); //append id and for attributes into elements switch( $obj.attr('type') ){ case 'text': case 'password': case 'radio': case 'checkbox': […]

技術文章, 資訊科技

jQuery FlyDOM 樣板系統範例

2009 年 04 月 09 日

essoduke chang

css, html, javascript, jquery, json

範例連結：jQuery FlyDOM 樣板系統範例這個範例將伺服器端定位為資料提供者，所有的排版、定位等都交給使用者端來運算，也因為如此，所以特地試做了「檢視方式」清單，效果還不錯，只是還有幾個小問題要解決。除了三種樣式作成樣板物件之外，包括分頁選擇也都獨立成樣板，伺服器端的頁數資料我也是用 JSON： //css 的值就是各頁數的樣式類別 [{'page':'1', 'css':'selected'}, {'page':'2', 'css':''}] 為了讓總筆數和「目前顯示」資料能正確使用並減少伺服器存取的次數，我把這個項目也列入資料產出的 JSON 並放到最後，所以每次查詢資料就會有這項資訊可以使用，不用再額外撈一次： [{'id':'1', 'player':'Paul Konerko'....}, ......, {'records':'18', 'display':'1-9'}] ※ 資料使用 MLB 2009-04-07 白襪對皇家例行賽的打者成績，直接建立成 JSON 所以無法進行刪除，而修改也沒完成，反正只是 FlyDOM 的範例嘛… 這是預設的「詳細資料」樣式。檢視方式的下拉選擇清單，只需要簡單的定位就能完成。圖示檢視，這個順便用了 jQuery UI 做了拖曳排序的效果。清單檢視參考資料： jQuery Plugin – FlyDOM: Create DOM on the Fly jQuery: The Write Less, Do More, JavaScript Library […]

技術文章

jQuery: 重新繫結事件並傳入參數

2009 年 02 月 17 日

essoduke chang

javascript, jquery

狀況：Click event 是直接寫入 <a>，所以使用 unbind 並無法解除這個事件，如果需要在這個函數內重新給定參數並且再次呼叫該怎麼做？ //javascript function abc(x, y){ alert(x + ', ' + y); } //html test 首先要使用 removeAttr 來清除 onclick event： $(selector).removeAttr('onclick'); 再來，利用 bind 可傳入 data object 的特性解決傳遞參數，並使用匿名函數來呼叫： $(selector).bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); }); 最後，發揮 jQuery 的特長寫成一列： $(selector).removeAttr('onclick').bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); […]

技術文章, 資訊科技, 軟體分享

jQuery 台灣郵遞區號外掛

2009 年 02 月 13 日

essoduke chang

javascript, jquery, twzipcode, zipcode, 郵遞區號

※已發布 twzipcode 1.4.1 版會想要做這種無聊的外掛，起因是目前手上的案子，原本用了傳統的 DOM 做了一組單一頁面適用一組的 js，之後突然有兩組的需求，前天又變成四組，一氣之下就著手寫了這個 Plugin 來用 XD 下載位置（10KB） Badongo XUN6 範例：jQuery 台灣郵遞區號外掛安裝 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="twzipcode.min.js"></script> 用法： javascript $('#container').twzipcode({ county: 'county', //縣市清單 ID area: 'area', //鄉鎮市區清單 ID zipcode: 'zipcode', //郵遞區號輸入框 ID countySel: '高雄縣', //縣市預設值 areaSel: '那瑪夏鄉' //鄉鎮市區預設值 }); HTML <div id="container"> <select id="county"><option value="">縣市</option></select> <select id="area"><option value="">鄉鎮市區</option></select> <input […]

技術文章, 資訊科技

台灣三碼郵遞區號 JSON 版

2009 年 01 月 21 日

essoduke chang

javascript, jquery, json, twzipcode, zipcode, 郵遞區號

最近有個案子有做到三碼郵遞區號填寫的部份，而中華郵政網站上提供的只有 Word, Excel 和 TXT 格式，索性就自己造檔，轉成 JSON 格式可讀性比較高、維護也方便，而且許多伺服端語言都有 JSON Library 可以使用。 zipcode.js 可以使用下列方法來個別取出： //縣市 for (var county in zipcode) { ... } //鄉鎮市區 for (var area in zipcode[county] { ... } 範例應用：那怎麼應用在 3+2 格式？最後兩碼讓訪客自己填就好了啊…XD — 本來是想寫成 jQuery 的 Plugin，不過好像沒必要 :p

喃喃自語

Flash Satay 語法轉換器再次更新

2008 年 12 月 09 日

essoduke chang

flash, html, javascript, jquery, xhtml

這次加入了 Yahoo! Video 及 Google Video 的支援，以及可即時播放轉換後的語法，並增加全螢幕的 param 選項。 ※ Yahoo! Video 在 Firefox 下不支援 transparent，所以預設將不能勾選透明背景。以後的更新可能只有影片網站的支援了…

資訊科技, 軟體分享

Flash Satay 語法轉換器更新

2008 年 12 月 08 日

essoduke chang

flash, html, javascript, jquery, xhtml

因為之前轉換器的主機拆下來清灰塵之後就懶得組裝回去，所以這個轉換器就消失了，趁著今天閒閒改寫一下程式碼，並且除了 YouTube 之外還加入 Vimeo 的轉換。在 param 選項部份，除了預設的 allowscriptaccess 為 always 以外，可以再選擇是否顯示影片選單、wmode 透明等，其餘 param 之後再視情況增加了。 Flash Satay Converter 沙嗲語法轉換器使用方法一樣：選擇來源影片的網站填入影片網址（播放頁面的網址，不是 embed 的內容）比方說：http://tw.youtube.com/watch?v=Q3J8gBUXrK0 修改播放器的寬高勾選額外選項，如：影片選單、wmode 透明點選右側轉換按鈕複製下方的轉換結果

技術文章, 資訊科技

jQuery 實用入門（二）表單篇

2008 年 08 月 17 日

essoduke chang

javascript, jquery

網頁 Form 表單可以有很多 Javascript 應用，比如說表單驗證、聚焦提示、防錯誤措施等等，而這些功能通常可以經由 jQuery 簡化程式寫法，以下就是本期案例。案例頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示，送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。這個案例使用了 jQuery 的語法串接特色: 將多個函式串接為一行，大大節省程式行數。

技術文章, 資訊科技

jQuery 實用入門（一）

2008 年 08 月 15 日

essoduke chang

javascript, jquery

什麼是 jQuery？ jQuery 是一個快速又簡潔的 JavaScript 程式庫，簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程，簡單地來說，jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。雖然如此簡單，不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒，而網路上眾多範例都是屬於進階、甚至高階技巧，所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章，而第一篇就鎖定在網頁元素的操作，希望對於入門者有所幫助。剛開始的準備當然就是下載最新版本的 jQuery 並引入網頁的 head 區段，並準備好方便編輯 HTML 源碼的編輯器，我推薦 PSPad，一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 基礎：網頁元素控制我合作過不少網頁設計師，對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計，所以對於 HTML 原始碼通常都一知半解，但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。舉個最常在 DW 源碼內出現的 id 屬性，多數使用 DW 的設計師都不清楚這個 id 有什麼用途？簡單來說，id 就是所謂的 identity（識別）也就是該元素的唯一識別名稱，單一網頁的一個 id 只能出現一次，為的就是方便使用 DOM 的方式來控制這些元素。

技術文章, 資訊科技

Multiple File Upload by AjaxFileUpload of jQuery

2008 年 04 月 25 日

essoduke chang

ajax, javascript, jquery

AjaxFileUpload 是 jQuery 的擴充套件之一，可以使用 Ajax 來即時上傳檔案，不過缺點就是一次只能上傳一個。但是今天在研究 Multiple File Upload 搭配 AjaxFileUpload 時，找到一個土法煉鋼的方式可以達成一次上傳多個檔案。這是 AjaxFileUpload 原本的使用方法： $.ajaxFileUpload ({ url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, status){ if(typeof(data.error) != 'undefined'){ if(data.error != ''){ alert(data.error); }else{ alert(data.msg); } } }, error: function (data, status, e){ alert(e); } }); 土法煉鋼法就是利用 Multiple File Upload plugin 所建立的 Array 讓上述過程跑 […]

技術文章

form preview within Thickbox via Ajax

2008 年 04 月 22 日

essoduke chang

ajax, javascript, jquery, plugin

突然想研究用 Thickbox 搭配 Ajax 來達成表單預覽的功能，就動手實作了一下。 jQuery Ajax var url = "preview.php?" + new Date().getTime(); $.post(url, {c: $("#content").val()}, function(result){ $("#preview_temp").html(result); tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false); } ); 流程其實很簡單，就是把結果 post 到後端處理的程式，再把結果 callback 到頁面元素就行了，會用 post 就是不用受限於 get 的 2KB 限制。整個流程的重點在於「如何在 javascript 中呼叫 Thickbox」，方法就是直接使用 tb_show 函式，把 url 直接替換成呼叫 inline 的方式即可： //tb_show('Your Caption', href, group); tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false); Demo: form preview […]