jquery 常用插件集合

1. Simple Effects for Drop-Down Lists

　　一个 jQuery 插件用于将普通的 select 控件转成一个带有一些简单扩展效果的下拉列表。

　　2. X-editable

　　这个插件能够让你在页面上创建可编辑的元素。它能够使用任何引擎（bootstrap、jquery-ui、jquery），并且包含弹出式和内联模式。

　　3. Garlic.js

　　Garlic.js 自动在本地保存表单文本字段的值，直到表单被提交。这样，你的用户如果不小心关闭选项卡或浏览器，也不会失去任何宝贵的数据。

　　4. Calendario

　　一个日历插件，用于创建灵活的日历。它只能用于支持新的 CSS 特性如 calc ()的浏览器。

　　5. Stapel

　　使用堆效果自动对缩略图进行分组。缩略图集根据他们的共享数据堆属性进行分组，当点击堆时将分散到各自的位置。

　　6. Pickadate.js

　　完全响应式和轻量级的 jQuery 日期输入选择器。

　　7. jHERE

　　有了 jHERE，你可以很容易地添加互动地图到您的网站中。拥有一个强大的地图 API，高度可定制的标记，事件处理和信息气泡。

　　8. Responsive Img

　　Responsive Img 是一个 jQuery 插件，它能够根据页面的宽度改变一张图片的 src 属性。

　　9. FooTable

　　FooTable 能够将 HTML 表格转成可扩展或响应式表格。不管表格中有多少列数据。

　　10. Stairway Navigation

　　一个阶梯效果的导航菜单。

　　11. SocialCount

　　一个更轻、更快的社交网络部件。

　　12. Baraja

　　采用类似分发扑克牌的方式来移动元素。

　　13. jPanelMenu

　　可创建一个 paneled 风格的菜单（类似于在 Facebook 和 Google 移动版，或其它原生 iPhone 应用中看到的）。

　　14. Any List Scroller

　　该插件能够根据任何内容、任何尺寸、任何列表产生可滚动效果。

　　15. Sliced

　　将图像分割成块，并把它们组合在一起。

　　16. mlens

　　放大镜插件。

　　17. jQuery Burn

　　jQuery Burn 这个插件能够让文字产生火焰般的效果。它使用多个文本阴影，并通过反复改变他们水平偏移量实现。

　　18. Shapeshift

　　该插件可以动态地将元素集合安排在一个父容器网格中。

常用JQuery插件整理

　　虽然自己也写过插件，但JQuery插件种类的繁多，大多时候，我还是使用别人写好的插件，这些都是我用了同类插件里较为不错的一些，今天就整理一下公开放出来。

　　UI：

　　jquery.HooRay（哈哈，自己写的插件是必须有的）

　　jquery UI（官方的UI插件，功能很多，但我只用少数几个）

　　jQuery EasyUI

　　jQuery LigerUI

　　对话框：

　　artDialog（很欣赏这个插件，又强大又美观）

　　AsyncBox（制作者小吴同学也是博客园的人呢）

　　jBox（继续国人的插件，就是皮肤稍微做的弱了点，功能上一点不输前两者）

　　lhgDialog（作者似乎和我同龄，挺不错的）

　　表单验证：

　　jquery-validate（这个就不用介绍了吧）

　　jQuery formValidator（作者也是园子里的人哦）

　　放大镜：

　　cloud zoom（这个效果炫）

　　图片查看：

　　jquery.fancybox（网站打开有点慢）

　　树状结构：

　　JQuery zTree（最近刚发现的，还是国人做的，看了demo演示，很强大，不过还没正式使用过）

　　JQuery Treeview（之前一直在用的，是老外的）

　　焦点图：

　　myFocus（又是一款国人的插件，花样很多，略有缺陷）

　　soChange（如果项目没特别要求，一般都用这个，简单易上手）

　　AnythingSlider

　　评分：

　　jquery.raty

　　Tab：

　　idTabs（虽然自己也写了tab选项卡的插件，但在之前一直用的都是这个）

　　面包屑导航：

　　jBreadCrumb（IE6下似乎有点问题）

　　Tip：

　　colortip

　　分页：

　　jPaginate

　　上传：

　　jUploader

　　基于HTML5的可预览多图片Ajax上传

　　应该还是有遗漏，一些用在特殊功能上的插件没有写上。另外希望大家也说说常用的插件有哪些，好的插件必须拿出来和大家分享分享。

一:jquery.validate 表单验证插件

1:可以从官网下载该插件,目前为1.55版,使用是需要加载对应的js文件
<script type="text/javascript" src="jquery.validate.js"></script>

2:在ready后,需要使用$("form").validate() 选择需要进行验证的form表单

3:在对于的表单元素上,使用class指定不同的验证类型.
如class="email required",分别代表:email格式,不能为空,还可以使用其他的url,或者使用minlength="2"指定长度

只要用户在输入时,就会自动提示,而不需要等待点击按钮(似乎第一次需要)

常用的验证写在 class属性,与minlength属性中,也可以使用jquery.metadata.js 进行整合使用,将所有的约束,写在
class属性中

1: 使用<script>加载对于的jquery.metadata.js文件,
2: 变更验证方法为$("#form").validate({meta:"validate"});
3: 将所有的验证信息写入到class中 如:class="{validate:{required:true,minlength:2}}"

第三种提供验证的方法,使用name属性,而不使用html的class属性

1:在$("#form").validate()方法中,通过参数传入验证规则(json形式)
2:通过name属性,匹配不同的规则
3:定义具体的规则,根据name建立Json格式

如:<input name="email" />
   $("#form").validate({rules:{
    email:{ //复杂的结构
required:true,
email:true,
minlength:2
}
    url:"url" //可以使用简单的方式
}})

验证信息的本地化
需要导入对于的语言信息验证库,如中文的message_cn.js

也可以在上述的方法中,添加messages属性的key,使用json的形式,设置不同验证条件下的错误提示
class="{validate:{required:true,minlength:2,messages:{required:'不能为空啊啊啊',minlength:'太短咯'}}}"

自定义错误信息验证类型,并美化
例子并不明确,只能看到也是JSON的形式,声明错误类型,并且使用样式和function关联,进行错误信息的管理..
包括errorElement,success等key

自定义验证规则

1:添加自定义的验证方法到$.validator对象中
如: $.validator.addMethod(
"formula", //验证方法名
function(value,element,param){ //验证规则
return value==eval_r(param)
})
2:按照上述的验证方法,添加对应的验证条件
valcode:{formula:"7+9"} //valcode为form元素名,formula为上述定义的验证方法名,"7+9"为传入的param

二: 表单插件--Form,用于为表单提供直接的Ajax能力,在validatior插件的下载包中也提供.

使用的简单方式为
$("#form").ajaxForm(function(){....}) 其中的function为成功提交后的回调函数

核心方法包括ajaxForm()与ajaxSubmit(),使用的方法类似

两个方法都接受一个参数,(function)作为提交后的回调函数或者(options)对象,提供更多的功能

定义options对象的例子(JSON对象)
var options = {target:"#output1", //将服务端返回的内容放入该ID的元素中
beforeSubmit:showRequest, //提交前的回调函数
success:   showResponse, //提交后的回调函数
url:url, //默认为form的action,如果声明,则会覆盖
type:type, //默认是form的method,可覆盖
dataType:null, //'xml','script',or 'json' 服务端返回的数据类型
clearForm:true, //表示提交成功后清空form
resetForm:true, //提交成功后重置form
timeout:3000 //超时的毫秒数
}

提交前的回调函数,包含三个参数,表单数据(数组),jQuery类型的form对象,options参数(包含默认值)

提交后的回调函数,包括两个参数,返回的内容,返回的状态
其中,根据不同的数据类型,返回的结果需要进行不同的解析方式,包括HTML JSON 以及XML
HTML--直接使用,为XMLHttpRequest对象的responseText属性
XML--为XMLHttpRequest对象的responseXML属性,需要以XML进行解析
var name = $('name',responseXML).text();
JSON --直接使用对象.属性就可以进行访问

对于表单的提交前验证, 可以在options中的beforeSubmit中指定回调函数,如果return false来阻止提交


动态绑定事件插件---Livequery

在一般情况下,jQuery只会根据选择器,对已存在的符合条件HTML元素进行一次事件注册,而不会对后期动态变更的元素添加

事件绑定,而且重复添加事件,并不会覆盖,而是多次执行

livequery提供了动态绑定的能力,对符合选择器的元素,都会持久化进行绑定

进行添加事件的方式,和原来的有所区别

原格式: $('a').click(function(){...})
新格式: $('a').livequery('click',function(){...})


jQuery UI的使用,目前版本为1.7.2 需要jQuery1.3.X

包含了三个部分: 交互,组件(Widget),效果库
1: 交互: 拖动(drag),置放(drop),缩放(resizeable),选择(Selectable),排序(Sortable)
2: 组件...不少,当不如ExtJs丰富

简单的拖放使用: draggable(...) ...参数不同的设置,起到不同的效果
不带参数为:添加拖放能力
disable:暂时停止拖动能力
enable:重新开启拖动能力
destory:彻底移除拖动能力

这里只介绍了Sortable插件,提供了拖动排序能力的组件

添加sortable能力的方式
$("#myList").sortable({delay:1}), 在可以sortable里面添加JSON形式的参数

delay参数是为了防止拖拽与单击发生冲突,所以延时一毫秒
stop:fun.. 用于在排序后执行的回调函数

使用$(".myList").sortable("serialize")方法可以得到列表结果的参数化形式 myList[]=ss$my....


管理Cookie的插件--Cookie

写入Cookie的方式: $.cookie('key','value')
读取cookies的方法: $.cookie('key')
删除cookies的方法:$.cookie('key',null) //就是重新覆盖为null

也可以在添加值的时候,用第三个JSON参数,来设置保存的状态
$.cookie('key','value',{
expires:7, //有效的天数,不设置在session过期后自动删除,或浏览器关闭
path:'/', //cookies的路径属性,默认为页面路径
domain:'jquey.com', //域名属性,默认是创建该cookies的页面域名
secure:true //true表示此cookies需要https来传输
})

1. rlightbox : A jQuery UI Mediabox

rlightbox是一个轻量级的jQuery插件，它可以用来展示多样的内容，比如图片、视频、Flash动画等，它还可以自适应浏览器的宽高。除此之外，它拥有一些其他同类插件所没有的功能：可实现只展示图片的一部分，通过拖动来查看图片其它部分。因为它是基于jQuery UI的，所以自定义样式也变得非常方便。

项目地址/ 下载

 

2. FitText : A jQuery Plugin For Inflating Web Type

FitText 是一个 jQuery 的字体自动调整插件。以适应不同的浏览屏幕。

项目地址/ 下载

3. ImageMapster

ImageMapster 这是一个用于创建可交互式图片地图的jQuery插件。

使用这个插件任何类型的图片地图都可以被高亮选中，单个区域或多个区域并提供多种操作方式。

其提供了非常多的内置功能比如：改变Color-opacity或被选中时的边框。或者添加淡入淡出的效果。 还可以为选中的区域添加Tooltip消息展示，分组选中多个区域等功能。

项目地址/ 下载

4. Apprise : The Alert Alerternative For jQuery

Aprrise是一个简单的模式对话框。风格、内容、位置和功能都完全可自定义。

项目地址

5. Badger : Super Sexy iOS Style Badges for jQuery

提供一种简单的方法，让页面元素看起来像 iOS 风格，无需任何图片。

项目地址

6. FitVids. js : jQuery Plugin For Fluid Width Video Embeds

如果你需要你的视频能够自动适应网页的宽度，FitVids.js这个jquery插件可以帮助你。

项目地址/ 下载

7. Portamento : Add Floating Panel To Your Web Page

我们浏览网站的时候，经常能看到固定在页面中且不会随着滚动条滚动的DIV层，这样的浮动效果可通过Portamento这个jQuery插件实现。Portamento是一个轻量级的jQuery插件，它具有简单并且容易使用的特点。使用此插件，只需一行代码便可实现网页元素浮动于固定位置的效果。它会检测浏览器大小是否足以显示浮动层，如果过小将不会浮动显示。Portamento也提供了几个参数可供设置，定制性也是比较高的。

项目地址

8. uLightBox

jQuery uLight Box是一个简单和易于使用的插件，并且能够满足创建灯箱效果所有的要求。具备高度可定制。

项目地址

9. jQuery Wiggle

jQuery Wiggle这个插件可用于模仿iPhone手机上的图标按纽蠕动(wiggle)效果。

项目地址

10. Elastislide – A Responsive jQuery Carousel Plugin

Elastislide是一个jQuery carousel插件。展示框会根据内容自动调整。

项目地址

 

11. JCookies : HTTP Cookie Handling Plugin

jCookies能够让你存储任何数据类型如：字符串，数组，对象等。它通过JavaScript存储Cookies，然后通过服务器端代码如：C# 和PHP 读取数据。

项目地址

 

Via http://skytechgeek.com/2011/10/11-fresh-useful-jquery-plugins-for-september-2011/