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
	});
});

目前 IE 並不支援 :hover 的功能，難怪只有 FireFox 可以看的懂 :hover CSS 的功能，上網查了一下解決方法，當然就是利用幫忙處理瀏覽器相容性的 javascript Framework：利用 jQuery 就可以解決 IE 這部份的不相容，參考了 Whatup 的 Blog：tr hover 在 IE 上的 hack，解法也寫的很清楚。 先看看 html

  
  
  
  

    

      test1
    
    
    
    

      test2
    
    
  
  

tr.row1	{ background-color: #EFEFEF; }
tr.row1:hover td{
background-color: #D1D7DC;
}

上次寫了 [jQuery] 表單取值 radio checkbox select text 驗證表單，這篇淺顯易懂，在 ptt 有人問到如何把 select 的 value 跟 text 值加入到另一個 select 的 options 裡面，其實還蠻簡單的，利用 jQuery - Select box manipulation 這個 plugin 就可以輕鬆做到了，底下是我的一些筆記心得：

實作案例

首先如何取得 select 的 value 跟 text

1
2
3
4
5

/*
*
* 取得 select value 值
*/
$('#selectList').val();

取得 text 值，可以利用 :selected 這個

1
2
3
4
5

/*
*
* 取得 select text 值
*/
$('#selectList :selected').text();

最近在專案全面使用 jQuery 來整合後台部份，目前還沒有大量用到 AJAX 的部份，等以後有時間會全部轉換 AJAX 利用 JSON 的部份，其實之前就有寫到一篇用 datatype JSON 的方式來實現 AJAX：[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單，大家可以參考看看，不過今天大概寫一下昨天在實做驗證表單取值的一些心得，在設計後台的時候，我把編輯文章跟新增文章的功能做在同一塊，然後利用 jQuery 去改變傳值狀態，利用 hidden 的 mode 欄位來決定是要新增文章還是修改文章

$(document).ready(function() 
{
  $("#add_news_link").click(function(){
    $("#mode").attr("value", "add");
  });
})

今天下午都在研究網站 CSS 的排版跟製作，在現在 Web 2.0 的時代，很多入口網站全部都改換成 CSS 來排版，取代掉原本的 Table 表格，這算是相當重大的改變，一來對於維護網站會相當方便，二來就是省下很多頻寬資源，大型入口網站：Yahoo、痞客幫 首頁全部都利用 CSS Div 的方式下去排版，當然一些基本的 CSS 觀念要有，這樣就很好學習了，CSS 排版觀念：CSS 盒子模式{.nav}、CSS 浮動 (Float)，可以參考 CSS 語法教學 這裡，這個網站寫的相當簡單，可以當作入門網站，順手就把之前幫學校做的一個網站：國立中正大學::第十屆全國實證經濟學論文研討會 全部換成 CSS，也通過 無障礙 A+ 程式驗證。

之前寫了一篇讓 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 就可以了

在 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"> 全選