jQuery插件

jQuery插件

jQuery 常用插件

crypto-js

crypto-js可以非常方便地在 JavaScript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密

jQuery.easyform

easyform 是一个jQuery插件，包括easyfrom，easytip，两个部分。

easyform是表单验证插件，支持复杂的表单验证规则，并且使用简单。甚至可以做到1行js搞定全部。

使用方法和实例，参阅EASYFORM

表单验证插件——validate

jQuery Validate 插件为表单提供了强大的验证功能。

参考：

官网jqueryvalidation

jQuery Validate

jQuery Form Plugin

jQuery Form Plugin

能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。

参考：

jQuery Form Plugin

jQuery Form Plugin中文

图片灯箱插件jquery.notesforlightbox.js

类似于QQ空间浏览图片的插件。

参考：

jQuery应用三之图片浏览插件LightBox

图片放大镜插件jqzoom

参考：

JQZoom

cookie插件jquery.cookie.js

使用jquery.cookie.js后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：

$.cookie(key，value)

读取：

$.cookie(key)

删除：

$.cookie(key，null)

例子：

$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val(), {
path: "/", expires: 7
})
}
else {
$.cookie("emial", null,{
path: "/"
})
}
});
});
</script>

autocomplete插件jquery.autocomplete.js

搜索插件的功能是通过插件的

autocomplete()

方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

textbox - 文本框元素名称

urlData - 插件返回的相近字符串数据

options - 调用插件方法时的配置对象

右键菜单插件jquery.contextmenu.js

格式为：

$(selector).contextMenu(menuId,{options});

meunId - 快捷菜单元素

options - 配置对象

<script type="text/javascript">
$(function () {
$(".title").contextMenu("sysMenu",
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
'Li4': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
</script>

效果为：

lifocuscolor插件jquery.lifocuscolor.js

自定义的lifocuscolor插件可以在

<ul>

元素中，鼠标在表项

<li>

元素移动时，自定义其获取焦点时的背景色，即定义

<li>

元素选中时的背景色，调用格式为：

$(Id).focusColor(color)

Id - 表示

<ul>

元素的Id号

color - 表示

<li>

元素选中时的背景色。

<script type="text/javascript">
$(function () {
$("#u1").focusColor("#ccc");
})
</script>

效果为：

jQuery UI插件

使用的为jquery-ui-1.9.2.min.js

拖曳插件draggable

格式为

$(selector). draggable({options})

options - 方法调用时的配置对象。

containment - 属性指定拖曳区域

axis - 属性设置拖曳时的坐标方向

<script type="text/javascript">
$(function () {
$("#x").draggable({containment:"parent",axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});

});
</script>

放置插件droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector - 接收拖曳元素

options - 方法的配置对象

drop - 表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用

<script type="text/javascript">
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
$(this).addClass("focus")
$(this).find("#tip").html("");
}
})
});
</script>

拖曳排序插件sortable

拖曳排序插件的功能是将序列元素（例如、
）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

<script type="text/javascript">
$(function () {
$("ul").sortable({
delay:2,//为预防与点击事件冲突，延时2秒
opacity:0.35//以透明度0.35随意拖动
})
});
</script>

面板折叠插件accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>

选项卡插件tabs

使用选项卡插件可以将

<ul>

中的

<li>

选项定义为选项标题，在标题中，再使用

<a>

元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容

options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容

<script type="text/javascript">
$(function () {
$("#tabs").tabs ({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通过移动鼠标事件切换选项卡
})
});
</script>

效果为：

对话框插件dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中

alert()

和

confirm()

函数的功能，它的调用格式为：

$(selector).dialog({options});

function sys_Confirm(content) { //弹出询问信息窗口
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系统提示',
hide: 'slide',
buttons: {
'确定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}

菜单工具插件menu

菜单工具插件可以通过

<ul>

创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector - 菜单列表中最外层

<ul>

元素

options - menu()方法的配置对象

<script type="text/javascript">
$(function () {
$("#menu").menu();
});
</script>

微调按钮插件spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

工具提示插件tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

<script type="text/javascript">
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>