50多個強大的jQuery插件應用實例

 

50多個強大的jQuery插件應用實例

 

原文:50+ Amazing Jquery Examples- Part1

jQuery是近段時間裏比較流行的一個JavaScript框架，不斷有使用者開發出新的 jQuery插件。下面收集了50個開發者最喜歡使用的jQuery插件。這僅僅是第一個系列，你先品嚐，第二道大餐即將到來。
Sliding Panels －滑動門控制
1) Sliding Panels For jQuery -元素可以展開或關閉，創建出手風琴的滑動效果。

(2) jQuery Collapse -這個jQuery插件同樣點擊後滑動展開或關閉DIV層。
Menu － 菜單
3) LavaLamp

(4) A Navigation Menu- 錨鏈接的無序列表嵌套, 可以添加2級菜單

(5) SuckerFish Style

Tabs - 選項卡
6) jQuery UI Tabs / Tabs 3 - 基於 jQuery 的一個Tab選項卡導航

(7) TabContainer Theme - 當用戶在選項卡之間進行切換時，產生JQuery風格的淡出動效果。

Accordion－ 手風琴效果
8 ) jQuery Accordion

Demo

(9) Simple JQuery Accordion menu

SlideShows － 幻燈片
10) jQZoom-讓你在你的網頁上很簡單的實現圖片的縮放功能。

(11) Image/Photo Gallery Viewer- 一個圖像/相片的畫廊展示插件。可以讓你對圖片進行分組、併產生像Flash一樣的多種瀏覽特效。

Transition Effects - 過渡特效
12) InnerFade - 可以讓網頁中的任何元素產生淡化效果

(13) Easing Plugin-另外一個簡單的過渡效果插件

(14) Highlight Fade

(15) jQuery Cycle Plugin- 擁有多種過渡效果的一個Gallery插件。

奇幻的jQuery
16) Riding carousels with jQuery - 這個jQuery插件可以生成一個水平或垂直的列表，並且允許你控制DIV層的滑動顯示。

Demo :

Color Picker －拾色器
17) Farbtastic -這個 jQuery 插件可以讓你通過Javascript添加一個或多個拾色器widgets到一個頁面中。

Demo :

(18) jQuery Color Picker
LightBox －燈箱效果
19) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.

Demo :

(20) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :

(21) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.

Demo :

(
iframe
22) JQuery iFrame Plugin

Form Validation -表單驗證器
23) Validation - 有一套完整相當的形式驗證規則。該插件還動態地創建ID和聯繫信息。

Demo :

(24) Ajax Form Validation - 在客戶端使用jquery驗證的一種形式，它可以驗證用戶名是否有效等。

Demo :

(25) jQuery AlphaNumeric -歡迎對對錶單域中的某些字符進行限制

Form Elements － 表單事件

(26) jquery.Combobox - 從現在的選擇元素中創建一個個性的HTML組合 Demo is here.

(27) jQuery Checkbox -樣式化選擇框，從而提高交互能力。

(28) File Style Plugin for jQuery -File Style插件讓你可以使用圖像做爲文件瀏覽按鈕，你還可以樣式化文件名稱區域。
Star Rating － 星形評級系統

(29) Simple Star Rating System

30)Half-Star Rating Plugin
ToolTips －提示工具
31) Tooltip Plugin Examples - 一個花俏的提示應用。 可以對提示信息進行自定義位置, 設置陰影效果和添加更多內容等.你可以點擊demo 演示.

(32) The jQuery Tooltip

Tables Plugins －表格插件
33) Zebra Tables Demo -使用jQuery來創建出斑馬線風格的數據表格，鼠標懸浮時能改變背景色。

Demo :

(34) Table Sorter Plugin - 把一個標準的HTML表格分解成Thead和Tbody標籤構成的分類表格，不需要刷新。它能夠成功地解析和整理多種類型的數據，包括聯繫資料。

(35) AutoScroll for jQuery -可以生成網頁表格的熱點自動滾動效果

(36) Scrollable HTML table plugin- 用來轉換表格爲普通的滾動HTML。不需要額外的編碼。

Demo :

Draggable Droppables And Selectables 拖拽
37) Sortables - 一個簡單強大的拖拽插件。

(38) Draggables and droppables- 這是一個很好的演示。用來實現拖拽樹形菜單項目的操作

Style Switcher － 切換風絡
39) Switch stylesheets with jQuery允許訪客選擇他們喜歡的網站樣式，使用了Cookie記錄，也就是同一個用戶下次再訪問時，除非他不切換，否則會保留他選擇的樣式。

Demo演示.
Rounded Corners 圓角效果
40) jQuery Corner Demo

(41) JQuery Curvy Corners- 這個插件可以讓你生成光滑、無鋸齒的圓角效果。

Must See jQuery Examples 應該瞭解的一些jQuery應用實例
42) jQuery Air - 一個非常非常特別的客戶管理界面應用插件，太特別了，太太太特別了。

Demo :

(43) HeatColor

Demo :

(44) Simple jQuery Examples

(45) Date Picker -一個靈活個性的jQuery日曆組件。

Demo :

(46) ScrollTo -這個jQuery插件可以讓你實現當點擊鏈接時中滾動到頁面中的某一對象

(47) 3-Column Splitter Layout 一個3欄佈局分配插件。

(48) Pager jQuery -一個小巧的 jQuery插件，用來增加分頁的頁碼效果

(49) Select box manipulation

(50) Cookie Plugin for jQuery

51) JQuery BlockUI Plugin

再獻一部分

圖象幻燈片展示和畫廊插件
1) Galleria -這是一個用jQuery編寫的javascript圖像畫廊插件。之前帕蘭已經做過介紹.

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j15.jpg%22" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
2) jQuery Multimedia Portfolio -支持多種多媒體格式，包括:圖片，視頻 (flv), 音頻 (mp3), 並且自動偵測每個文件的擴展名再分別調用合適的播放器。
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j20.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
3) wSlide -通過列表名單切換動畫盒式的內容區域。screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j25.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

標籤雲
4) Hover Sub Tags- 使用jQuery來縮小標籤雲所佔成的頁面，比如你有一個”Ajax”的標籤, 你可以在這個標籤裏面再放入二級標籤 jquery, [url=href="http://www.google.com/url?sa=t&ct=res&cd=1&url=http://mootools.net/&ei=gDqUR_XwI5q8swKnzImZDQ&usg=AFQjCNFj4r7j_7PmlXv628np0QOO6f7nSw&sig2=OxuL__vllqa1QRkqkNnhIg"]mootools[/url], _fcksavedurl=""http://www.google.com/url?sa=t&ct=res&cd=1&url=http://mootools.net/&ei=gDqUR_XwI5q8swKnzImZDQ&usg=AFQjCNFj4r7j_7PmlXv628np0QOO6f7nSw&sig2=OxuL__vllqa1QRkqkNnhIg"]mootools[/url]," 等…當鼠標懸浮在一級標籤上時，就出現一個動態提示效果的二級標籤雲。[url=

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j36.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

分頁系統
5) Pagination-創建一個分頁導航,當你的網頁內容比如多的時候，比較適合使用這種分頁導航系統，同時也有利於SEO。這個利用jQuery編寫的分頁導航的特點是，你可以把它與搜索相結合，控制搜索結果的顯示文章數。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j26.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

導航系統
6) Accordion Menu -這是一個手風琴效果的演示, 標題使用 H3 標籤, 子菜單使用UL標籤來實現伸縮。[url=

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j13.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
7) jQuery Treeview Plugin http://jquery.bassistance.de/treeview/demo/] screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j31.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">[/url]
8 ) Coda-Slider- 一個強大的jQuery滑動門技術，效果平滑，很酷。支持上下頁的控制。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/t12.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
9) Simple Horizontal Accordionhttp://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html] screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j32.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">[/url]

表格和網格

10) TableRowCheckboxToggle - 它籠統地加入了切換功能，以任何錶行您所指定的基礎上的CSS類的名字。它將默認切換任何複選框內的錶行。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j1.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
11) TableEditor - Tableeditor提供了靈活的實時編輯的HTML表格。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j30.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
12) Ingrid - Ingrid是一個個性的jquery插件，可以爲你的圖表添加很多網格數據行爲，包括大小，分頁，整理，排柱造型以及更多。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j34.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">


表單
13) jQuery Nice Form -創建自定義風格的表單事件。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j2.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
14) Easy Multi Select Transfer 選項菜單選中後到達另一個選項欄的效果。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j42.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
15) jQuery Form Plugin- 讓你輕鬆自然地升級HTML表單使用Ajax表單和提交的方法，以方便從從表單元素中搜集資料，並決定如何管理提交進程，讓你對數據如何提交能有充分的控制權。<br>


滾動和滑動技術
16) jQuery.SerialScroll -此插件可以讓你很容易實現任何動畫的一系列要素依次滾動。你可以用它作爲一節滑塊，滾輪文本，幻燈片，新聞股票等。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j10.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
17) liScroll - LiScroll是一個 jQuery 插件，可以讓你轉換任何無序列表爲一個滾動內容展示。<br>
18) Spinner -可以讓你在一個固定區域裏無限量的增加內容進行滾動樣式的展示。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j41.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">


表單事件
19) jWYSIWYG 一個可以內嵌網頁的所見即所得的HTML文本編輯插件。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j5.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
20) Simple chained combobox -很簡單的一個jquery選項插件，通過JSON的加工和返回特點，提供連鎖反應式的多重選擇。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j14.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
21) jQuery checkboxhttp://widowmaker.kiev.ua/checkbox/] screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j18.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">[/url]

22) jGrowhttp://lab.berkerpeksag.com/jGrow#samples] screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j16.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">[/url]

Toggling
23) jTruncate in Action -jtruncate可以自定義截斷你網頁中的文本實體。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j7.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
24) toggleElements - toggleElementS是一個展開/隱藏效果的jqurey插件。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j37.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">


漸變和陰影
25) Drop Shadows -這個插件可以爲你的文本生成一個非常有趣的陰影效果。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j9.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
26) Gradient jQuery plugin - 實現漸變效果，你可以設定漸變的方向和透明度值。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j11.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
27) Gradient -讓你擁有一個動態漸變效果的背景，不需要使用任何圖片。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j29.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">


Lightbox燈箱效果
28) Facebox 基於jQuery, [url=href="http://www.facebook.com" _fcksavedurl=""http://www.facebook.com"" class="alinks_links" οnclick="return alinks_click(this);" title="facebook" rel="external">Facebook[/url]風格的lightbox燈箱插件，可以顯示圖片、DIV層和文章頁面等。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j17.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
29) jQuery Lightbox Plugin- (balupton edition)screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j44.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

拾色器

30) jQueryColorPicker -一個簡單的jquery拾色器插件，可以讓用戶選擇色盤中的顏色來實現背景顏色的切換。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j19.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

值得試用的一些jQuery插件
31) Animated InnerFade- 完全符合w3c標準的動畫幻燈片插件。[url=
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j24.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
32) Easy POP Show 1.0 Release -全屏幕顯示的畫廊插件。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j8.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

33) jqChart- Ajax的圖表插件screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j23.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
34) UI Datepicker -一個簡單的jQuery  UI日期拾取器. screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j35.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
35) JSmile -一個完全自定義的添加特定表情圖標的插件。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j3.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
36) ImgAreaSelect - imgAreaSelect是一個 jQuery插件，可以讓你在一張圖片中選擇一個矩形，並且可以列出座標值。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j4.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

37) jPrintArea-jPrintArea是一個簡單的，用來打印指定的文本內容。查看DEMO演示
38) jTabber- 一個Tab選項卡切換技術，不需要重新載入頁面screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j27.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
39) jQuery Calculation Plug-in - 一個計算類插件。可以讓你計算一些簡單或是複雜的數學公式。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j6.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
40) jquery.biggerlink - 這個jQuery插件可以讓你爲指定的鏈接添加成在線代理後的鏈接地址。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j40.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

41) Humanized Messages- 在你的網頁上顯示一個半透明的內容信息，但是當用戶有任何操作時，它就會慢慢消失。screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j33.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
42) Ajax Manager 幫助你管理AJAX請求和迴應，(比如，放棄請求，鎖定請求，排序請求等). screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j12.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">
43) Background-Position Animationhttp://www.protofunc.com/scripts/jquery/backgroundPosition/] screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j22.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">[/url]
44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.Check out their demo page

45) jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.Check out their demo page
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://parandroid.com/images/45-jquery-plugins/2j43.gif" οnlοad="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window/nCTRL+Mouse wheel to zoom in/out';}" border="0">

Tag標籤: web標準,CSS,jQuery,插件