• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Joanna Qian
Stay Hungry, Stay Foolish!
博客园    首页    新随笔    联系   管理    订阅  订阅
常用的Jquery插件介绍

一、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

12款常用的Jquery插件介绍 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

故名思议,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来修改强度的显示样式,比较方便实用。

posted on 2012-08-29 05:41  Joanna Qian  阅读(694)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3