我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如 jQuery、Json.NET、 EntityFramework、ELMAH、… 等等。各位可能也了解到,目前 jQuery 最新版為 2.0.2 版,這個最新版基本上僅支援 IE9 以上瀏覽器 ( IE8 以下不支援 ),因此大部分人應該都不會選擇安裝最新版的 jQuery,但是在使用 NuGet 安裝或更新套件的過程中,卻有可能不小心將 jQuery 套件自動升級到最新版,導致網站發生許多相容性的問題。今天這篇文章主要就是說明如何手動將 jQuery 降級到 1.x 的版本。註: 此方法適用於任何 NuGet 套件,所以若要指定降級版本,都可以參考這篇文章。
... 繼續閱讀 ...
透過 jQuery 取得 HTML 表單資料其實不難,但每次遇到要取得 Radio 單選選項的選取值與 Checkbox 多選的選取值都要花些時間查詢取值的方法,網路上能搜尋到的方法也大多是舊版 jQuery 的語法已經不適用了,因此特別撰文筆記一下,也順便把取得各式 HTML 表單欄位的方法做個整理。
... 繼續閱讀 ...
今天介紹這工具可說是在 Web 界非常實用的線上編輯器,編輯什麼呢?就是 HTML, CSS, JavaScript 這些東西啦。以往為了要展示或分享一些 JavaScript 的功能或 CSS 樣式,必須要架設一個網站放這些檔案才能讓其他人知道這東西執行後的結果,但 jsFiddle 的出現可謂是佛心來的,幫我們「代管」這個程式碼在「雲」上,讓我們可以將任意網頁內容放上去測試、驗證、存檔、分享。
... 繼續閱讀 ...
由於 jQuery 1.5 在前幾天釋出正式版,我從 Release Notes 中發現 jQuery Team 這次改用 UglifyJS 對整個 jQuery 原始碼進行編譯 (其實是將 JS 最小化)(原本是使用 Google Closure Compiler ),但 UglifyJS 只能執行在 NodeJS 執行環境下,原本 NodeJS 只能跑在 Linux 環境下,還好從 node.js v0.2 版之後就開始支援在 Windows 環境下執行,以下是設立 NodeJS 執行環境的流程。
... 繼續閱讀 ...
前幾天提到的 jQuery 1.4.2 的 .live() API 在 IE 無法套用 change 事件 問題我今天又再次研究了一遍,發現 .live() 的 change 事件在 IE 其實還是可以用的,只是有個非常奇怪的注意事項,雖然上次的方法也可以解決問題,但我還是覺得很納悶想試圖找出根本原因(root cause),今天分析了好幾個小時依然無法確診,我研判可能是因為 jQuery 在程式中用到一些變數引發 Side Effect 而導致此問題。不過,既然無法確診,但我至少能確定如何引發這個 Bug,因此寫了一個簡單的 Bug 驗證程式,我堅信這是 jQuery 1.4.2 的 Bugs,因此也主動回報給 jQuery 開發團隊了 ( Ticket #7002 )。
... 繼續閱讀 ...
今天幫同事除掉了一個 Bug,主要的問題在於他在網頁的某個下拉選單 ( <select> ) 使用 .live() API 套用change 事件,但客戶卻測出一個無法觸發 change 事件的狀況,不過同事之前都一律使用 Firefox 進行測試,所以一直沒發生問題過,但今天我用 IE8 測試後發現所有透過 live() API 註冊 change 的事件全部都不會執行,看來這應該是 jQuery 1.4.2 的 Bug 了,希望下一版能修復。
... 繼續閱讀 ...
我的部落格這週的圖片超多,下載完首頁竟然要 5MB 這麼大,頻寬夠的話首頁下載完畢大概 1 分鐘左右,也因為這個關係我採用了 Lazy Load Plugin for jQuery 讓我部落格上的圖片可以等使用者看到時再下載,透過這種延遲效果就能讓使用者不會等待所有圖片都下載才能順利看到網頁,由於 Lazy Load Plugin for jQuery 必須在 jQuery(document).ready() 裡啟動,但我昨天測試卻怎麼測試都會等圖片全部下載完才會執行,那不就沒用了嗎?也因為此問題讓我研究出許多問題背後的問題與問題之外的問題,收穫頗為豐富,請繼續看下去。
... 繼續閱讀 ...
最近有專案要用到下拉式選單搜尋的功能,由於客戶的表單中有個下拉選單(DropDownList)有數千個選項要選取,由於選項太多因此我設計了一個搜尋下拉選單的功能,雖然 jQuery 有內建 :contains() 選取器,不過卻是區分大小寫的版本,因此我自行擴充了一個選取器,讓搜尋時可以不區分大小寫。
... 繼續閱讀 ...
我們在日常開發工作當中對於 jQuery 已經非常依賴,幾乎每個大大小小的案子都會用上一些,所以深入瞭解 Visual Studio 2010 能帶來什麼幫助十分重要,妥善的利用開發工具帶來的便利性將可以有效減少開發時間、提升開發效率,今天我就要介紹幾個 Visual Studio 2010 與 jQuery 相關功能、開發技巧與好用工具。
... 繼續閱讀 ...
我們每個案子都會用許多錯誤追蹤的機制確保網站品質,但還是不時會讓客戶發現有些功能無法操作,而這些問題大多出在 JavaScript 錯誤,由於一些老舊的瀏覽器或不同瀏覽器特性不同的關係,難免會有不小心寫錯的時候,為了能有效追蹤這些不易察覺的錯誤,我們會利用 JavaScript 追蹤 JavaScript 錯誤!
... 繼續閱讀 ...
簡單的東西不簡單,將 DOM 元素聚焦是個再簡單不過的功能了,在實務上也經常用到,但是我們最近在使用 FancyBox 利用 IFRAME 載入頁面時卻怎麼樣都無法讓游標自動停在特定的文字輸入框中,除此之外,我也將我這些年累積遇到無法 focus() 的問題做了一次總整理,一共有六個版本之多。
... 繼續閱讀 ...
像我們幾乎每天都要與 jQuery 為伍,到處搜尋 jQuery Plugins 是難免的,有時後還花不少時間試用過才會決定用在專案裡,我之前介紹過的 MiniAjax.com 網站就包括許多 jQuery 外掛,不過今天介紹的網站就真的全部都跟 jQuery 有關的外掛套件:The Ultimate jQuery List
... 繼續閱讀 ...
我想家喻戶曉的 jQuery UI 套件應該不用特別介紹了,但我最近又看到一套不錯的 jQuery Tools 套件,相較於知名且多功能的 jQuery UI 套件,jQuery Tools 提供一種額外的選擇,他只提供幾種網站上最常用的功能,包括 Tabs、Tooltips、Expose、Overlay、Scrollable、Flashembed 等,其中的 Flashembed 就可以取代我們之前常用的 swfobject 套件,他還支援 SIFR 功能喔。光聽我說還不夠,最好立即看看線上展示,你就知道有哪些酷炫實用的效果了。
... 繼續閱讀 ...