一、Jquery UI
JqueryUI是Jquery官方制作的插件,它的功能非常强大,内容涵盖也很广,包括日期选择、颜色选择、Tab标签切换、拖动层、索引排序、弹出对话框层、滑动门效果、进度条等等,而且还支持多种颜色样式和多种滤镜效果。 可以说,只要用了JqueryUI就不怎么需要其他插件了,但是它的缺点也是功能太庞大,有的时候不一个功能需要引用4-5个JS文件,加在会变慢。
二、jQuery Easing
jQuery Easing是动画效果扩展插件,它加强了Jquery中动画的效果。 比如slideUp、slideDown、toggle、show、hide等等,还有Animate。 使用起来也比较简单:
$(element).slideUp({ duration: 1000, easing: method, complete: callback }); $(myElement).animate({ left: 500, top: 500 },'easeOutExpo' );
三、bgiframe
bgiframe不是一个应用类型的Jquery插件,而是一个修复BUG的Jquery插件。 bgiframe插件修复的是弹出层被下拉菜单遮挡的BUG,虽然这个BUG不是那么严重,但在应用中是十分恼人的。 bgiframe用法很简单,只要在希望不被遮挡的DIV层上加上应用代码即可:
<script type="text/javascript"> $(function() { $('#box2').bgiframe(); $('#box3').bgiframe(); $('.fix-z-index').bgiframe(); }); </script>
四、Jquery.history
Jquery.history是一款可以帮助我们操作浏览器历史的插件,这里所谓的操作并不是管理历史,而是可以存储应用程序状态的网址和恢复它的状态。
支持的浏览器: Internet Explorer 6, 7, and 8+ Safari 4 and 5+ Google Chrome 4+
五、jQuery Metadata
jQuery Metadata Plugin可以将HTML元素的class属性、random属性、子元素和HTML5的data-属性中的元数据(metadata)提取出来并作为对象返回。 比如
var data = $('li.someclass').metadata(); //返回metadata数据
六、jQuery Numberformatter
jQuery Numberformatter是一款格式化数字的插件,它可以将各类数字格式化,包括支持货币、科学计数法和百分比。比如
$("#salaryUS").blur(function(){
var number = $(this).parseNumber({format:"#,###.00", locale:"us"}, false);
$("#salaryUnformatted").val(number);});
七、jQuery Cookie
$.cookie(’name’, ‘value’); //设置cookie的值,把name变量的值设为value $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true}); //新建一个cookie 包括有效期 路径 域名等 $.cookie(’name’, null); //删除一个cookie
故名思议,jQuery JSON是操作JSON数据的插件,只要涉及到数据交互传递的时候都会用到JSON字符串,所以它的实用性可想而知。 Jquery JSON里面有几个关键命令:$.toJSON、$.evalJSON、$.secureEvalJSON、$.quoteString。
var encoded = $.toJSON( thing );
括号里面的thing将被转换成可用的对象
九、floatbox
Floatbox是一款对话框弹窗插件,类似于JqueryUI中的Dialog,但它比Dialog的功能更加全面。 在众多Dialog插件中,我最看好这款。因为它的兼容性、API都比较完善,而且还很好的支持了iframe嵌入功能。 最简单的使用方法就是在需要弹窗的元素上添加class="floatbox "即可。
十、loopedslide
loopedslide是一款简单的幻灯片插件,它支持与幻灯片对应的圆点按钮,上一个和下一个按钮,以及自动滑动,而且还支持Easing效果,一般都网站幻灯片焦点图切换效果都够用了。 而令我喜欢的一点是它的自定义非常全面、方便:
$("#slides").slides({ container: 'container', slideClass: slide, pagination: 'pagination', navButtons: 'nav-buttons', fadeSpeed: 400, slideSpeed: 250, animateSpeed: 200, autoHeight: true, padding: 20, easing: 'easeOutQuad' });
十一、jQuery Tooltip
jQuery Tooltip是一款悬浮提示标签插件,它可以在鼠标悬浮到指定连接上时出现提示的内容。 这款插件提示信息支持文本、链接、图片等,而且应用简单:
$('#set1 *').tooltip();
十二、jQuery Password Validation
Password Validation是密码强度提示插件,可以根据用户输入的密码关键字来判断密码的强度,就像各大网站上密码验证一样,而且使用者还可自己修改CSS来修改强度的显示样式,比较方便实用。