jQuery常用插件

来源:互联网 发布:中国海洋大学就业 知乎 编辑:程序博客网 时间:2024/06/05 11:07

1.表单验证插件——validate
$(form).validate({options})
-form:表单名
-options:配置对象
            $(function () {                $("#frmV").validate(                  {                      /*自定义验证规则*/                      rules: {                            email:{                            required:true,                            email:true                          }                      },                      /*错误提示位置*/                      errorPlacement: function (error, element) {                          error.appendTo(".tip");                      }                  }                );            });

2.表单插件——form
实现ajax方式向服务器提交表单数据
$(form).ajaxForm({options})            $(function () {                var options = {                    url: "http://www.imooc.com/data/form_f.php",                    target: ".tip"                }                $("#frmV").ajaxForm(options);            });

3.图片灯箱插件
该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,
在加载图片时自带进度条,还能以自动播放的方式浏览图片
$(linkimage).lightBox({options})    $(function () {        $(".divPics a").lightBox({            overlayBgColor: "#666", //图片浏览时的背景色            overlayOpacity: 0.5, //背景色的透明度            containerResizeSpeed: 600 //图片切换时的速度                });            });

4.图片放大镜插件
$(linkimage).jqzoom({options})            $(function () {                $("#jqzoom").jqzoom({  //绑定图片放大插件jqzoom                    zoomWidth: 123, //小图片所选区域的宽                    zoomHeight: 123, //小图片所选区域的高                    zoomType: 'reverse' //设置放大镜的类型                });            });

5.cookie插件
$.cookie(key,value):保存
$.cookie(key):读取
$cookie(key,null):删除
6.搜索插件
通过插件autocomplete()方法与文本框想绑定,当文本框输入字符时,
绑定后的插件将返回与字符串相近的字符串提示
$(textbox).autocomplete(urlData,[options])            $(function () {                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];                $("#txtSearch").autocomplete(arrUserName,{                    minChars: 0, //双击空白文本框时显示全部提示数据                    formatItem: function (data, i, total) {                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式                    },                    formatMatch: function (data, i, total) {                        return data[0];                    },                    formatResult: function (data) {                        return data[0];                    },                    matchContains: true                }).result(SearchCallback);                function SearchCallback(event, data, formatted) {                    $(".tip").show().html("您的选择是:" + (!data ? "空" : formatted));                }            });

7.右键菜单插件
$(selector).contextMenu(menuId,{options});
-meunId:快捷菜单元素
-options:配置对象


0 0