使用jQuery製作自定義PickList插件

現在在網上到處都可以找到各種豐富多彩的jQuery插件。之前給公司做的項目裏就用到了不少,比如jqModal等。雖然第三方插件幫我實現了很多功能,但仍然喜歡使用jQueryUI裏面的插件,總覺得這些插件應該比較成熟,成爲體系,彼此之間的兼容性應該更好。
因此,在現在的項目中,儘可能的使用jQueryUI原生的組件。同時,由於最近一直使用Struts2框架,因此選用了jQuery針對Struts2的插件。

以前對javascript幾乎一竅不通,ajax更是沒有系統去學,只是粗知原理。正是通過jQuery簡明的語法,以及java的根底,對javascript和ajax漸漸熟悉起來。在上一個項目中,使用jQuery,倍感得心應手。
眼下正在幫朋友做一個系統,裏面需要用到PickList組件。記得以前在學RichFaces的時候,裏面的PickList很好用,但爲了這個PickList就把RichFaces搞進來,實在有些小題大做。呵呵~

於是請教google,發現網上對於PickList的jQuery插件好像不是很多(也可能是我使用的查詢關鍵字不準確)。其中有兩個看上去還不錯。
jQjQuery Picklist Plugin (http://gsgd.co.uk/sandbox/jquery/picklists )
Dodo's Picklist(http://pure-essence.net/stuff/webTips/dodosPicklist/index.html )

這兩個插件都是基於兩個多選<select>控件,個人感覺Dodo's Picklist設計的更好一些。這兩個插件應付簡單的應用已經足夠了,但是如果選項是比較複雜的html內容,似乎就有些力不從心了。由於<select>控件內只能容納<option>類的標籤,而<option>標籤內不能放入<div>或<span>之類的內容,因此想要製作具有複雜內容項的PickList僅憑以上兩種插件,看起來不太可能。
既然如此,不如自己動手,豐衣足食,自己寫個插件玩玩?之前jQuery就是看着網上高人的翻譯文檔,邊學邊用學會的。既然之前摸着石頭過了河,這次也可以試試。

重新打開那個翻譯文檔,仔細閱讀設計自定義插件的章節,再從之前的那些下載的第三方插件中找找規律,就這樣竟然寫出了自己的第一個jQuery插件。代碼肯定還有不少可以改進的地方,但基本實現了我所預想的功能。

現在放到網上,希望能和大家分享(其中包括Demo)。同時也想請高人們指點指點。具體說明,稍後放到blog上來。

jquery.pickList-0.1.7 (http://code.google.com/p/jquery-picklist/downloads/list )

 

主要特點:
1. 在選項條目中支持豐富的HTML內容,例如<div>、<img>等;
2. 可以爲子元件定義充分自由的jQuery選擇器,以及CSS樣式;
3. 支持CTRL、SHIFT鍵操作;
4. 支持多種事件callback回調;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章