[jQuery] Events/live Click

今天在利用 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();
}
);
原來看 Tony 是直接網頁載入 button,而我的狀況是後來人工點選產生的 button 跟 tr 標籤,所以問了一下 Tony,發現了一個解決方法,那就是利用

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

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

blur, focus, mouseenter, mouseleave, change, submit

[Read More]

[jQuery] 解決 IE6 不支援 :hover CSS

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

test1 test2
css 寫法:
tr.row1	{ background-color: #EFEFEF; }
tr.row1:hover td{
background-color: #D1D7DC;
}
[Read More]

[jQuery] 如何取得 select List index 和 value 值

上次寫了 [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();
[Read More]

[jQuery] 表單取值 radio checkbox select 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");
  });
})
[Read More]

[jQuery] Javascript plotting library 畫圖 chart

沒想到 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 libraryXML/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] 畫出來的圖如下: flot_01 (by appleboy46)

[Read More]

[Pear] 利用 Validate 套件驗證 E-mail 多重表單認證

最近都在玩 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)驗證(可以同時驗證上述功能)
[Read More]

使用 CSS 排版製作網站

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

[Read More]

[jQuery] Confirm Plugin 動態新增表單欄位

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

 
 
  
 
[Read More]

[jQuery]判斷 checkbox 是否選取,實現全選跟全部取消

在 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"> 全選
[Read More]

[AJAX] jQuery plugin cascade 多重下拉選單應用 by json

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

/*
格式就在底下總共有三攔
*/
{'when':'selectedValue','value':'itemValue','text':'itemText'}
第一個 when:這是上一層的 select 的 value 值 第二個 value:這是下一層的 select 的 value 值 第三個 text:這是下一層 option 的 text 我想有一點 html 基礎的,大概就知道我在說什麼了吧 [Read More]