JQuery

為了慶祝 jQuery 四週年慶，官方網站終於 Release 1.4 版本了，也大幅度修改了 jQuery API 網站，跟以往一樣，jQuery 提供兩種版本讓大家測試跟下載：jQuery Minified (23kb Gzipped)，這版本是利用 Google Closure Compiler 去壓縮，以往好像是用 YUI Compressor，另一版本就是沒經過壓縮：jQuery Regular (154kb)，當然 Google 也提供了 host 來讓 jQuery 有 cache 檔案作用，增加網站速度： http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js 1.4 版本的出來，最主要就是效能的改善，以及整個 Code Base 翻修，可以參考 John Resig 寫的 JavaScript Function Call Profiling，看到底下的圖，就大致上知道 1.4 的效能改善 .css() and .attr() 效能改善圖： 整篇都在說明 jQuery 效能的部份，真的是改善很多，Media Temple 主機商也贊助 jQuery 14天的徵文活動，大家可以上去看看有很多影片都是在介紹 jQuery，最後得獎的人可以獲得 13" MacBook Pro，真是太吸引人了。 最後可以參考 黑暗執行緒大大寫的：jQuery 1.4 小閱兵

在 Oceanic / 人生海海 看到這篇 thickbox 停止維護，ThickBox jQuery plugin 裡面算是不錯用的工具，在網路上常常會聽到這個名詞，thickbox 作者也推薦了底下類似套件：

• colorbox
• jQueryUI Dialog
• fancybox
• DOM window
• shadowbox.js 上面我還蠻推薦 

fancybox 的，目前開發專案都以它為主，因為在瀏覽整頁圖片，我覺得效果不錯，剛剛去 try 了一下 colorbox，發覺這套也不錯用。在 fancybox 裡面設定 zoomSpeedIn 或者是 frameWidth 的值，就直接設定數字，不用在加上引號，不然會沒出現效果。

$(document).ready(function() {
	$("a.group").fancybox({
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300
	});
});

驗證 form 表單屬於前端的工作，非常重要，避免使用者填錯格式，當然在 jQuery Plugin 可以找到專門驗證表單的外掛：jQuery plugin: Validation，此外掛不能相容於 IE 6，會沒辦法呈現效果，google 到一篇解決方法：Validating not happening in IE6 & no error removal on keyup，這篇裡面提到，必須使用 un-packed and un-minified 的版本，也就是沒有壓縮過的 javascript 檔案，不過我自己沒有試過就是了，底下針對表單的 checkbox select input radio 欄位做檢查的筆記，可以讓大家參考看看。 在 jQuery 1.3 裡面正式拿掉 [@attr] 的寫法，所以以前寫 $(“input:radio[@name=reg_sex]”) 都要改成 $(“input:radio[name=reg_sex]”)，這樣才是正確的，可以參考 jQuery Selector 這篇的 Attribute Filters 部份，先來一篇網路上實做提示說明在 text 來未：jQuery: show plain text in a password field and then make it a regular password field on focus 作法很簡單：建立兩個輸入 password 的 text input 欄位：

最近把之前弄的 jQuery 日期外掛拿出來看看，筆記過兩篇：[jQuery筆記] 時間日期外掛：timepicker | jQuery Plugins 跟 [jQuery筆記] 好用的日期函式 datepicker，目前在寫活動的開始時間跟結束時間會用到這兩個外掛，網路上有找到整合日期跟時間的程式，不過效果都不是我很喜歡，因為在時間方面想要設定可以分隔5分鐘，或者是10分鐘間隔，有沒有網友可以提供更好的 jQuery 外掛，可以將日曆跟時間整合在一起，用單一 input 欄位就可以控制，也可以設定間隔時間，目前是搭配這兩個外掛同時使用，也可以達到同樣效果。 timepicker 作者網站，愈到了一個問題，只要網頁裡面有用到 jQuery Show 跟 hide 都會讓 timepicker 程式判斷 CSS/offset 發生錯誤，導致功能無法顯示在正確的地方，會跑到網頁其他位置，解決方法就是當滑鼠 click input 欄位時，再去呼叫取得目前 offset 的位置。

var elmOffset = $(elm).offset();
$tpDiv.appendTo('body').css({'top':elmOffset.top + 'px', 'left':elmOffset.left+ 'px'}).hide();

update 2009.05.07: IE7 之後開始支援 CSS 2.0，因此可以開始使用 hover 之前發表一篇用 jQuery 解決 IE 不支援 :hover css，今天在看 和多 寫的網站 Registrano html 原始碼，發現利用 CSS 也可以辦到啦，底下就是 Registrano css 原始碼： html 部份：

  

    

      test1
    
        
    
    

      test2