JQuery

今天在利用 jQuery 來動態新增表格看到 ptt Tony 的網站教學，可以用 parent 的方式，一層一層往上尋找到 tr 標籤，然後再整個 remove 掉，覺得相當好用，不過內容是直接網頁動態載入 delete button，現在我想弄的是新增一個 button，Click 之後，會新增一組 tr 選單，裡面包含 delete button，但是這個 button 利用底下的 jQuery 寫法，會沒辦法作用。

$(":input[value=delete]").click(
function(e){
$(this).parent().parent().remove();
}
);

Events/live，這是新增在 1.3 版本的，他可以 bind 在現有的標籤，或者是未來新增的標籤上面，可以榜定的事件如下：

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 沒有支援底下的事件：

blur, focus, mouseenter, mouseleave, change, submit

目前 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");
  });
})

沒想到 jQuery 可以做到畫圖的功能，Flot 是 Javascript plotting library for jQuery，目前支援瀏覽器：Internet Explorer 6/7/8，Firefox 2.x+，Safari 3.0+，Opera 9.5 和 Konqueror 4.x+，瀏覽器跑起來都還不錯快，唯獨 Internet Explorer 有另外寫一個 excanvas 模擬器，也就是在 IE 上面看還需要 include 另外一個 js 檔案，才可以顯示圖形，我在 google 找到一些也是 PHP Chart 的好用工具，都是國外開發的：Libchart - Simple PHP chart drawing library，XML/SWF Charts，其實還蠻多的，自己 google 就會出現一堆，不過要上去試試看。 我個人還蠻喜歡 jQuery 的，所以我就推薦 Flot 這一個 jQuery 的 library，在官網上面有很多 example 的介紹，可以去看看這裡。 畫最簡單的圖，還有支援 cos sin 的三角函數喔 $(function () { /* [橫座標,縱座標] Math.sin 支援三角函數 */ var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.cos(i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); });[/code] 畫出來的圖如下：

最近都在玩 open source 的程式，方便加速自己開發 PHP 的專案，在申請帳號密碼部份就可以利用 Validate 套件來驗證，以及 email 填寫正確性，可以檢查 MX 或者是 A record 紀錄，還蠻方便的，也可以檢查 multiple 欄位，設計的相當不錯，也有金融相關套件可以驗證 CreditCard，金融套件名稱是 Validate_Finance 裡面的 Validate_Finance_CreditCard 部份，線上也有很多相關說明，可以參考 Validate 線上手冊，目前已經到 0.8.2 (beta)，如果使用 Release 版本，請選用 0.8.1，軟體可以在此下載，0.8.2 是在 2009-01-31 Release 出來的，還不錯用，最主要的功能如下

Package to validate various datas. It includes : - numbers (min/max, decimal or not) - email (syntax, domain check, rfc822) - string (predifined type alpha upper and/or lowercase, numeric,…) - date (min, max, rfc822 compliant) - uri (RFC2396) - possibility valid multiple data with a single method call (::multiple)

1. 驗證各種不同的日期函式
2. 驗證數字(最小/最大,是否是10進位)
3. email 驗證(正規語法驗證，check domain name 是否存在，rfc822 驗證)
4. 字串驗證(正規語法驗證，是否包含數字英文字母，可輸入最長或最短)
5. url 驗證(遵從 RFC2396 規定)
6. 多重欄位(multiple data)驗證(可以同時驗證上述功能)

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

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

在 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'}