JQuery 插件

it2022-05-05  151

//表单验证插件 $("#formid").validate({自定义规则});

$("#formid").validate({

        rules:{

               email:{

                       required:true,

                       email:true

               }

       },

        errorPlancement:function(error,element){

               error.appendTo("#错误信息提示id");

        }

});

 

 

//表单插件form

var options = {

          url:"www.baidu.com",

          target:"#返回内容显示的id"

}

$("#formid").ajaxForm(options);

 

//放大镜

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片放大镜插件</title> <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">图片放大镜</span> </div> <div class="content"> <a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"> <img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/> </a> </div> </div> <script type="text/javascript"> $(function () { $("#jqzoom").jqzoom{ //绑定图片放大插件jqzoom zoomWidth: 123, //小图片所选区域的宽 zoomHeight: 123, //小图片所选区域的高 zoomType: 'reverse' //设置放大镜的类型 }); }); </script> </body> </html>

  

 

//cookie插件

$.cookie(key,value,{expires: 7, path: ‘/’}); //新建 保存 并设置相关属性: 有效期  路径

$.cookie(key);//读取

$.cookie(key,null);//清除

 

//右键菜单插件 contextmenu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>右键菜单插件</title> <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"><span class="fl">点击右键</span></div> <div class="content"> <input id="btnSubmit" type="button" value="提交" /> <div class="tip"></div> </div> <div class="contextMenu" id="sysMenu"> <ul> <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li> <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li> </ul> </div> </div> <script type="text/javascript"> $(function () { $("#btnSubmit").contextMenu("sysMenu", { bindings: { 'Li3': function (Item) { $(".tip").show().html("您点击了“保存”项"); }, 'Li4': function (Item) { $(".tip").show().html("您点击了“退出”项"); } } }); }); </script> </body> </html>

 

//ul鼠标滑过li时 li的背景色改变

$("ul").focusColor("red"); //鼠标经过ul时 li的背景色为红色

 

//加

$.addNum($("#txtid1").val(),$("#txtid2").val());//两个数相加

//减

$.subNum($("#txtid1").val(),$("#txtid2").val());//两个数相减

 

转载于:https://www.cnblogs.com/YyuTtian/p/4267723.html


最新回复(0)