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,插件