Javascript

在 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 欄位：

之前寫了一篇讓 wordpress 可以支援 Google Map API 的教學：[AJAX] google map 的應用，不過我將 WordPress 升級到 WordPress 2.8-bleeding-edge 版本，發現 javascript 語言就不能使用了，因為在寫 javascript 的時候，有利用到
這個 Tag，不過送出後轉出來的 javascript 語言會變成編碼過後，" 會變成 ” Big5 編碼，所以這個問題很困擾我，去找一下 ，Wordpress 把斷行完全用 wpautop 這個函式下去取代，所以你只要在內容寫入 <br / > 都會消失，不然就是出現怪問題。 這個問題也不是無解，在網路上找到兩個解法： 1. inline-js - wordpress plugin 您只要在 javascript 語言包一層 tag 就可以了

最近在實做多重檔案上傳，寫過一篇 [PHP] pear 模組 HTTP_Upload 多重檔案上傳 Multiple files upload，那一開始我先設定只能上傳5個檔案，後來想想動態的話比較方便，畢竟現在網站都講求 web2.0，所以就利用 jQuery 來動態新增 input file 欄位，作法其實很簡單，不難的喔。其實還有 jQuery Confirm Plugin 可以利用它來確定使用者是否刪除檔案。 之前介紹的上傳檔案 html 部份：

在 ptt bbs 的 AJAX 版討論到如何判斷計算有幾個中文字數，那 TonyQ 兄跟 toshii 兄分別提供了兩種方法，我自己測試了一下包含全形字型，如：？，。…這些都算喔，我自己想到 中華電信 emome 的簡訊系統也會有判斷數字加上英文跟中文字的算法，看了一下大致上都是相同的。 TonyQ 解法：

/*
利用 regex pattern
*/
function chineseCount(word){
    return word.split(/[\u4e00-\u9a05]/).length -1;
}

var word="test中asd文asd字as到底asd有幾asd個?";
alert(chineseCount(word));

在 jQuery 底下要如何實現這個功能，其實還蠻簡單的，首先看 html 部份

1
2
3
4
5
6

<input name="user_active_col[]" type="checkbox" value="1"> 1
<input name="user_active_col[]" type="checkbox" value="2"> 2
<input name="user_active_col[]" type="checkbox" value="3"> 3
<input name="user_active_col[]" type="checkbox" value="4"> 4
<input name="user_active_col[]" type="checkbox" value="5"> 5
<input name="clickAll" id="clickAll" type="checkbox"> 全選

最近在弄動態下拉式選單，因為層級的關係，所以必須用到，大學裡面各學院，底下在各系所，在網路上看到一篇 [AJAX] jQuery的多重下拉式選單應用 PART1，實做起來是不會困難，可是我遇到一些怪問題就是了，目前還沒有解決，當然首推 jQuery plugin 套件 cascade，那也參考了國外的一篇文章 jQuery.cascade : Cascading values from forms ，這幾篇看完其實就差不多了，因為大家都寫得很清楚，官方網站 更是把所有應用都寫出來了，詳細很多用法可以參考 官方網站，看原始碼大概就知道在寫甚麼了。 先來說明一下使用的方法：在這個 jQuery cascade plugin 裡面，定義了一格式：

/*
格式就在底下總共有三攔
*/
{'when':'selectedValue','value':'itemValue','text':'itemText'}

最近開始摸了 jQuery，因為自己本身也很想學習，這是目前當紅的技術，許多網站已經開始在使用 jQuery AJAX 了，包含各大入口網站：Pixnet 痞客幫，大家會發現學習 jQuery 好處很多，重點是她將 javascript 整合了，讓你方便使用來讓網站 web 2.0 我想現在很多網站都是朝這個方向去進行了，如果想知道什麼是 AJAX 可以上網查維基百科解釋，已目前來說，大家都使用javascript 客戶端來取得資料，然而 AJAX 可以從Server端取的資料 show 在使用者端給大家看，底下會大概講解以及實做一個驗證。

在 PTT PHP 版看到一篇：[請益]簡體字轉繁體字的方法，然後裡面其實有推文說可以用看看 Google AJAX Language API，然後我自己去測試，發現只要文字一多，google 就轉換不出來了，就會出現無效果，我自己也回一篇 Re: [請益]簡體字轉繁體字的方法，其實問題出在哪裡，我也不確定，這可能要問 google 了，不然 google 提供的這個還蠻方便的，可以即時整合到網站裡面。 update：google API 不能用的原因，就是轉換的字數超過限制 嗯嗯，後來改用【原創】深藍UTF-8正體簡體轉換函數 1.0 裡面這套 VBB 系統提供的簡體繁體轉換，大概看一下原始碼，就可以使用了，不會很難，只要在網頁 header 端加上：