jquery之常用插件

最新推荐文章于 2022-03-22 16:50:48 发布

搬运工小孟

最新推荐文章于 2022-03-22 16:50:48 发布

阅读量435

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/dreamlivemeng/article/details/78613937

版权

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

validate表单验证插件(jquery.validate.messages_cn.js)

$(form).validate({options})

<script type="text/javascript">
            $(function () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                                required:true,//必填
                                email:true
                            }
                            
                          
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
</script>

form表单验证插件(jquery.form.js)

$(form). ajaxForm ({options})

 <script type="text/javascript">
            $(function () {
                var options = {
                    url: "https://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
</script>

lightBox图片灯箱插件(jquery.notesforlightbox.js)

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片

$(linkimage).lightBox({options})

<script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });
</script>

图片放大镜插件——jqzoom (jquery.jqzoom.js)
$(linkimage).jqzoom({options})

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

cookie插件(jquery.cookie.js)

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

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

autocomplete搜索插件(jquery.autocomplete.js)
$(textbox).autocomplete(urlData,[options]);

<script type="text/javascript">
            $(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];
                    }
                }).result(SearchCallback); 
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
                }
            });
</script>

contextmenu右键菜单插件(jquery.contextmenu.js)

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

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

lifocuscolor自定义对象级插件(jquery.lifocuscolor.js)
$(Id).focusColor(color)

<script type="text/javascript">
            $(function () {
                //调用自定义的插件
                    $('#u1').focusColor("#FF9B77");                 
            })
</script>

twoaddresult自定义类级别插件(jquery.twoaddresult.js)

$.addNum(p1,p2) 和 $.subNum(p1,p2)

<script type="text/javascript">
            $(function () {
                $("#btnCount").bind("click", function () {
                    $("#Text3").val($.subNum($("#Text1").val(),$("#Text2").val()));
                });
                $("#addCount").bind("click", function () {
                    $("#Text6").val($.addNum($("#Text4").val(),$("#Text5").val()));
                });
            });
</script>