jQuery插件

jQuery 常用插件

表单验证插件——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

使用cookie插件后，可以很方便地通过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>