Browse by Tags

我的GitHub首航 - jQuery版台灣地區地址輸入輔助器

一個多月前重翻Silverlight版，寫成 純jQuery版地址輸入輔助器 ，當時提到近期會以Open Source方式釋出。薑薑薑薑~ 終於，我也有作品在偉大的GitHub航道 載浮載沈 乘風破浪了! 過去有過使用CodePlex分享開源專案的經驗。近幾年來， GitHub 憑藉著符合社群交流特性的P2P運作模式，漸漸成為開源專案的最主要集散中心(jQuery, PHP, Perl, Ruby, Ruby on Rai, Mono, YUI… 全在上面 )，聲勢如日中天，就連Visual Studio也...

Posted 26 May 2013 10:43 PM 由 Jeffrey | 10 comment(s) 17,118

Filed under: jQuery

jQuery 2.0

jQuery於2013/4/18 釋出2.0版 ~ 這是我所寫過最好寫的jQuery改版文 ，本想只寫個"不解釋"就收工的 ，因為要講的在 jQuery 1.9 上市時已經講過囉~ XD 1.9是一次大改版，拿掉不少API，換版後程式不相容機率大增，升級前建議參考 升級指南 所列舉注意事項，以免踩雷觸礁。而2.0與1.9的API完全相同，只差在2.0完全摒棄對IE 6/7/8版的支援，更加輕巧快速。所以，如果網頁已調整好可配合jQuery 1.9運作，又不需要支援IE6/7/8...

Posted 20 April 2013 07:20 AM 由 Jeffrey | 4 comment(s) 17,845

Filed under: jQuery

王道歸來! 純jQuery版地址輸入輔助器

兩年前寫過 把Silverlight跟jQuery摻在一起做成瀨尿牛丸等級的地址輸入輔助器 ，將郵遞區號與地址路段資料XML封存在Silverlight XAP中，並在Silverlight以C# + LINQ實作縣市、鄉鎮市區、路名、郵遞區號關鍵字查詢，與 jQuery自動完成 整合，實現能快速操作的地址輸入欄位。兩年過去，已無人質疑HTML5將是網頁技術當今霸主的事實，於是興起地址輸入輔助器的改良計畫，決定移除對Silverlight的依賴，回歸純粹的JavaScript(jQuery)，讓它不再只侷限Windows平台...

Posted 06 April 2013 10:11 PM 由 Jeffrey | 8 comment(s) 20,394

Filed under: jQuery

打造更貼心的連動欄位網頁

在網頁設計中輸入欄位連動是很常見的情境，例如有員工編號及員工姓名兩個欄位，當使用者在輸入員工編號後，系統需自動帶出員工姓名。一般最直覺做法是利用<input>的onchange或onblur事件，在使用者輸入完成後送出AJAX呼叫向伺服器查詢後設定姓名欄位。程式範例如下: ( 展示 ) <! DOCTYPE html > < html xmlns ="http://www.w3.org/1999/xhtml" > < head >...

Posted 30 March 2013 05:49 PM 由 Jeffrey | 7 comment(s) 18,564

Filed under: jQuery

jQuery 1.9升級指南

如 前文 所說，jQuery 1.9是一次"拿掉哪些東西"比"增加哪些東西"來得重要的升級，大刀闊斧地移除及改掉許多不一致或沒效率的API，而革命總免不了要流點血(還記得jQuery 1.6的 .attr()/.prop()事變 嗎?)，雖然大部分的過時(Deprecated)API在過去1.7/1.8版釋出時就已強調過，但許多開發者可能跟我一樣，老師在講也沒在聽，過去怎麼寫就繼續寫下去。終於，1.9正式把這些過時API刪的刪改的改，該是面對現實的時候了!...

Posted 28 January 2013 06:55 AM 由 Jeffrey | 6 comment(s) 34,570

Filed under: jQuery

jQuery 1.9

jQuery已於2013/1/15 釋出1.9版 ~ 有趣的是，1.9版最值得關注的，倒不是又增加什麼新東西，而是它拿掉哪些舊東西!! 1.9版移除或變動了不少舊API，升級後可能導致現有程式無法相容，為此官方一併釋出 升級指南 (延伸閱讀: 我的升級筆記[稍後補上])以及升級Plugin( jQuery Migrate )協助開發者避雷保身。 之前預告過，jQuery 1.9將是最後一個支援IE 6/7/8的版本(簡稱"老IE", oldIE)，從jQuery 2.0起(註...

Posted 27 January 2013 12:38 PM 由 Jeffrey | 1 comment(s) 17,046

Filed under: jQuery

【茶包射手日記】jQuery自動完成在IE7無法點選提示項目

網友Barry 提問 ，網站套用jQuery AutoComplete Plugin，在IE7下無法用滑鼠點選結果項目，只能透過上下鍵移動選取。 看來得用IE7重現及分析錯誤，此時最痛苦的莫過於沒有 IE Dev Tools 可用，少了+9雙手劍，只能丟石頭打怪好悲情呀~ 幸好，IE7還有個 IE Dev Toolbar 可用，拿支小匕首聊勝於無。 在IE7上重現無法點選提示項目的情境，再開啟IE Dev Toolbar，觀察提示區塊的結構，發現DIV class=ac_reulsts下有一個IFRAME...

Posted 23 December 2012 08:08 AM 由 Jeffrey | 1 comment(s) 9,135

Filed under: Trouble-Shooting, IE, jQuery

CODE-以jQuery循序執行AJAX呼叫，並依結果決定是否繼續

很繞口的標題，不過就是我這次挑戰的需求。 用Google Map API轉換地址 時，曾示範過利用$.when().then()等待所有$.ajax()呼叫都完成後才執行顯示地圖的jQuery寫法，但這次的情境有點不同。 每次處理1到多筆AJAX呼叫(透過$.post()) 多筆AJAX呼叫需依序執行，第1筆執行完畢時才執行第2筆 當某一筆AJAX呼叫傳回特定結果時，代表出現狀況，停止後續AJAX動作 jQuery的$.ajax()自1.5版起改為回傳Promise物件(CommonJS提議的 設計模式...

Posted 05 September 2012 03:53 PM 由 Jeffrey | 7 comment(s) 24,301

Filed under: AJAX, jQuery

市佔過半，jQuery時代來臨

W3Techs (一個專門從事網站技術使用狀況分析的網站) 最近發表一篇關於jQuery應用現況的 調查報告 ，有幾項有趣的統計數字: 全世界網站採用jQuery的比例， 從2010/10/01至今，兩年內由25%成長到50.2% (Flash則是23.1%、Silverlight為0.3%) 使用JavaScript的網站中，有88.3%使用了jQuery ，第二名MooTools是8.9%，ASP.NET Ajax則是5.3%。 過去一年，平均每4分鐘，排名前百萬的網站中就有一個開始導入jQuery...

Posted 21 August 2012 11:46 PM 由 Jeffrey | 2 comment(s) 11,066

Filed under: jQuery

jQuery 1.8筆記

jQuery 1.8已於2012/08/09釋出 正式版 ，依照慣例，整理新版本摘要如下: CDN同步上架 1.8版已在Microsoft CDN服務 上架 囉! Google CDN亦已 就緒 ， jsfiddle 當然也不落人後，大家可多多利用。[ CDN是什麼 ? 能吃嗎?] Sizzle引擎重構 Sizzle是jQuery的選擇器引擎，幾乎每次改版都會重構改善效率，這次的重點在於幫忙鏟除querySelectorAll的跨瀏覽器地雷。另外，:has()現在可結合複雜的選擇器或:contains...

Posted 19 August 2012 11:59 PM 由 Jeffrey | 6 comment(s) 17,041

Filed under: jQuery

瀏覽器在回上頁時不會觸發網頁onLoad事件

最近參與的一個ASP.NET MVC行動網站專案，其中有項操作是由清單頁面按連結跳往編輯網頁，編輯完成後，透過jQuery Mobile內建的回上頁功能回到清單頁面。而清單頁面中透過$(function() { ajaxLoadListData() });的做法，預期每次網頁載入後[ jQuery.ready()事件 ]都會以AJAX方式重新取得最新清單資料，因此回上頁到清單，使用者就可立即看到剛才儲存的變更。 使用IE及Chrome測試功能正常，但進一步使用iPhone/iPad Safari瀏覽時...

Posted 02 August 2012 07:19 AM 由 Jeffrey | 3 comment(s) 39,748

Filed under: jQuery, HTML5

網頁介面開發-拖拉元素調整排序

各位老師、各位同學，我今天要示範的網頁介面開發技巧是--拖拉元素調整排序，(停頓兩秒)，拖拉元素調整排序... 開始前，請大家先看 示範網頁 ，網頁上會顯示五個<span>方塊，假設其排序有特定意義(例如: 出場順序，決定先用皮卡丘之後再派妙蛙種子之類的)，使用者可用滑鼠或手指直接拖曳方塊改變其排列順序，當某個方塊被拖到另一個方塊上，就對調兩個方塊的位置，藉此自由調整所有方塊的排列順序。 另外，網頁還很 騷包地 貼心地加上兩個方塊交換位置的動畫效果，更直覺地呈現"位置對調"的操作感受...

Posted 27 July 2012 07:04 AM 由 Jeffrey | with no comments 24,377

Filed under: jQuery, HTML5, Kendo UI, knockoutjs

使用jQuery.ajax傳送物件陣列給ASP.NET MVC

在ASP.NET MVC裡，我們可以用物件集合當成Action的傳入參數，例如以下範例: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;   namespace MvcMobileLab.Controllers { public class AjaxPostController : Controller { public ActionResult...

Posted 23 June 2012 08:19 AM 由 Jeffrey | 4 comment(s) 58,899

Filed under: jQuery, ASP.NET MVC

Google Maps API地址轉換

將地址轉換成地理座標的程序被稱為 地理編碼 (Geocoding)，Google Maps API亦支援地理編碼服務(注意: 有每天查詢次數不可超過2,500次的限制，申請Google Maps API Premier可以提高到100,000次)，呼叫方法很簡單，使用URL "http: //maps.googleapis.com/maps/api/geocode/json?address=要轉換的地址&sensor=ture或false"，便可得到一份JSON格式的地址座標資訊...

Posted 15 June 2012 08:09 AM 由 Jeffrey | 8 comment(s) 122,818

Filed under: jQuery, HTML5

RESTful探索4-萬用RESTful API ashx模版類別

上集 我們搞定了ASP.NET 3.5 Routing，能將api/{model}的Request正確導向指定的ashx。而在 系列文一開始 提過RESTful的另一個重點是依不同的HttpMethod進行不同作業，在jQuery.ajax()呼叫RESTful Web Service的 文章 中，其實已偷偷示範過如何用ASP.NET Web Form滿足RESTful Server端的要求，把類似的程式碼搬進ashx，就能打造出RESTful Web Service。 不過實務api中通常會包含多個Model的API程式...

Posted 23 March 2012 11:20 PM 由 Jeffrey | 1 comment(s) 15,423

Filed under: ASP.NET, jQuery, RESTful Web Service

搜尋