目录
1. 常用插件
validate (验证规则，即时显示异常信息；允许自定义验证规则)
ajaxForm （提交表单 并在指定元素上显示服务器返回的html格式数据）
autocomplete (输入框 以下拉列表形式展示搜索提示；双击空白框显示全部提示/输入文本后显示匹配到的所有选项)
cookie（保存、删除、读取 数据）
lightBox （选中图片后大图浏览）
jqzoom（在图片上移动时 右边显示放大后的效果,图片放大镜）
contextMenu （任意元素右键 弹出快捷菜单）
lifocuscolor 自定义插件（鼠标在表项元素移动时，自定义其获取焦点时的背景色）
twoaddresult 自定义插件（加法减法）
2. UI类型插件
draggable （拖拽）
droppable (放置---其他元素使用draggable完全拖拽进本元素后会调用)
sortable (拖拽排序：将序列元素（例如 1. 常用插件
validate (验证规则，即时显示异常信息；允许自定义验证规则)
$(form).validate({options})
例
表单验证插件
ajaxForm （表单 向服务器发送数据，并接收返回数据）
$(form). ajaxForm ({options})
例
表单插件
autocomplete (输入框 以下拉列表形式展示搜索提示；双击空白框显示全部提示/输入文本后显示匹配到的所有选项)
$(textbox).autocomplete(data,[options]);
例
搜索插件
搜索插件
用户名
cookie（保存、删除、读取 数据）
读取：$.cookie(key)，
保存：$.cookie(key，value)；
删除：$.cookie(key，null)
例
cookie插件
cookie插件
邮箱：
是否保存邮箱
lightBox （选中图片后大图浏览）
$(linkimage).lightBox({options})
例
图片灯箱插件
我的相册
-
-
-
jqzoom（在图片上移动时 右边显示放大后的效果,图片放大镜）
$(linkimage).jqzoom({options})
例
图片放大镜插件
图片放大镜
contextMenu （任意元素右键 弹出快捷菜单）
$(selector).contextMenu(menuId,{options});
例
右键菜单插件
点击右键
保存
退出
lifocuscolor 自定义插件(鼠标在表项
元素移动时，自定义其获取焦点时的背景色)
$(Id).focusColor(color)
例
自定义对象级别插件
对象级别的插件
- 橘子水果
- 芹菜蔬菜
- 香蕉水果
/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】 鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/
(function($) {
$.fn.extend({
"focusColor": function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色不为空，使用设置的颜色，否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;
$(this).find("li").each(function() { //遍历表项中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
}).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
})
return $(this); //返回jQuery对象，保持链式操作
}
});
})(jQuery);
twoaddresult (自定义插件 加法减法)
自定义类级别插件
自定义类级别插件
两数相+：
+
=
/*------------------------------------------------------------/
功能：计算二个数字相加或相减的结果
参数：数字p1,p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/------------------------------------------------------------*/
(function($) {
$.extend({
"addNum": function(p1, p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
var intResult = parseInt(p1) + parseInt(p2);
return intResult;
},
"subNum": function(p1, p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
var intResult = 0;
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
if (p1 > p2) { //如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);
2. UI类型插件
draggable （拖拽）
$(selector).draggable({options})
$(selector).draggable("enable")
$(selector).draggable("disable")
例
拖曳插件
沿x轴拖拽
沿y轴拖拽
droppable (放置---其他元素使用draggable完全拖拽进本元素后会调用)
$(selector).droppable({options})
例
放置插件
产品区
苹果
回收站
还没有产品
sortable (拖拽排序：将序列元素（例如
$(selector).sortable({options});
例
拖曳排序插件
我最喜欢的运动
- 1)足球
- 2)散步
- 3)篮球
- 4)乒乓球
- 5)骑自行车
accordion （折叠）
$(selector).accordion({options});
默认为第一个面板的内容为展示状态，点击第二个面板主题时，展示主题对应内容，同时关闭上一个面板内容。
例
面板折叠插件
tabs (选项卡)
$(selector).tabs({options});
将中的- 选项定义为选项标题，在标题中，再使用元素的“href”属性设置选项标题对应的内容
例
选项卡插件
dialog (对话框)
$(selector).dialog({options});
selector 一般为div元素，
例
对话框插件
张三
menu (鼠标移动在元素上显示菜单项)
$(selector).menu({options});
通过创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标
例
菜单工具插件
spinner （input微调按钮）
$(selector).spinner({options});
不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值
例
微调按钮插件
选择颜色值
tooltip (工具提示插件)
$(selector).tooltip({options});
当鼠标在目标元素上方时，显示目标元素title属性中的内容
例
工具提示插件
工具提示插件