1、表單驗證插件validate
該插件自帶包含必填、數字、URL在內容的驗證規則,即時顯示異常信息,此外,還允許自定義驗證規則,插件調用方法如下:
$(form).validate({options})
其中form參數表示表單元素名稱,options參數表示調用方法時的配置對象,所有的驗證規則和異常信息顯示的位置都在該對象中進行設置。
例如,當點擊表單中的“提交”按鈕時,調用validate插件驗證用戶名輸入是否符合規則,並將異常信息顯示在頁面中,
<head>
<title>表單驗證插件</title>
<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.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
</head>
<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表單驗證插件</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">郵箱:</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定義驗證規則*/
rules:{
email:{
required:true,
email:true
}
},
/*錯誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
2、表單插件form
通過表單form插件,調用ajaxForm()方法,實現ajax方式向服務器提交表單數據,並通過方法中的options對象獲取服務器返回數據,調用格式如下:
$(form). ajaxForm ({options})
其中form參數表示表單元素名稱;options是一個配置對象,用於在發送ajax請求過程,設置發送時的數據和參數。
例如,在頁面中點擊“提交”按鈕,調用form插件的
ajaxForm()方法向服務器發送錄入的用戶名和密碼數據,服務器接收後返回並顯示在頁面中,
<head>
<title>表單插件</title>
<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.form.js"></script>
</head>
<body>
<form id="frmV" method="post" action="#">
<div id="divtest">
<div class="title">
<span class="fl">個人信息頁</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">用戶名:</span><br />
<input id="user" name="user" type="text" /><br />
<span class="fl">暱稱:</span><br />
<input id="nick" name="nick" type="text" />
<div class="tip"></div>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
</body>
3、圖片燈箱插件lightBox
該插件可以用圓角的方式展示選擇中的圖片,使用按鈕查看上下張圖片,在加載圖片時自帶進度條,還能以自動播放的方式瀏覽圖片,調用格式如下:
$(linkimage).lightBox({options})
其中linkimage參數爲包含圖片的<a>元素名稱,options爲插件方法的配置對象。
例如,以列表的方式在頁面中展示全部的圖片,當用戶單擊其中某張圖片時,通過引入的圖片插件,採用“燈箱”的方式顯示所選的圖片,
<head>
<title>圖片燈箱插件</title>
<link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.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.notesforlightbox.js"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的相冊</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇風景圖片">
<img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇風景圖片">
<img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇風景圖片">
<img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
?
overlayBgColor: "#666", //圖片瀏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
})
});
</script>
</body>
4、圖片放大鏡插件jqzoom
在調用jqzoom圖片放大鏡插件時,需要準備一大一小兩張一樣的圖片,在頁面中顯示小圖片,當鼠標在小圖片中移動時,調用該插件的jqzoom()方法,顯示與小圖片相同的大圖片區域,從而實現放大鏡的效果,調用格式如下:
$(linkimage).jqzoom({options})
其中linkimage參數爲包含圖片的<a>元素名稱,options爲插件方法的配置對象。
例如在頁面中,添加一個被<a>元素包含的圖片元素,當在圖片元素中移動鼠標時,在圖片的右邊,將顯示放大後的所選區域效果,
<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://static.mukewang.com/img/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://static.mukewang.com/img/52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom({ //綁定圖片放大插件jqzoom
zoomWidth: 123, //小圖片所選區域的寬
zoomHeight: 123, //小圖片所選區域的高
zoomType: 'reverse' //設置放大鏡的類型
});
});
</script>
</body>
5、cookie插件
使用cookie插件後,可以很方便地通過cookie對象保存、讀取、刪除用戶的信息,還能通過cookie插件保存用戶的瀏覽記錄,它的調用格式爲:
保存:$.cookie(key,value);讀取:$.cookie(key),刪除:$.cookie(key,null)
其中參數key爲保存cookie對象的名稱,value爲名稱對應的cookie值。
例如,當點擊“設置”按鈕時,如果是“否保存用戶名”的複選框爲選中狀態時,則使用cookie對象保存用戶名,否則,刪除保存的cookie用戶名,
<head>
<title>cookie插件</title>
<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.cookie.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">cookie插件</span>
<span class="fr">
<input id="btnSet" type="button" value="設置" />
</span>
</div>
<div class="content">
<span class="fl">郵箱:</span><br />
<input id="email" name="email" type="text" /><br />
<input id="chksave" type="checkbox" />是否保存郵箱
</div>
</div>
<script type="text/javascript">
$(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("email",null, {
path: "/"
})
}
});
});
</script>
</body>
6、搜索插件autocomplete
搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定,當文本框輸入字符時,綁定後的插件將返回與字符相近的字符串提示選擇,調用格式如下:
$(textbox).autocomplete(urlData,[options]);
其中,textbox參數爲文本框元素名稱,urlData爲插件返回的相近字符串數據,可選項參數options爲調用插件方法時的配置對象。
例如,當用戶在文本框輸入內容時,調用搜索插件的autocomplete()方法返回與輸入內容相匹配的字符串數據,顯示在文本框下,提示選擇,
<head>
<title>搜索插件</title>
<link href="http://www.imooc.com/data/jquery.autocomplete.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.autocomplete.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">搜索插件</span>
</div>
<div class="content">
<span class="fl">用戶名</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
</div>
<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>
</body>
7、右鍵菜單插件contextMenu
右鍵菜單插件可以綁定頁面中的任意元素,綁定後,選中元素,點擊右鍵,便通過該插件彈出一個快捷菜單,點擊菜單各項名稱執行相應操作,調用代碼如下:
$(selector).contextMenu(menuId,{options});
Selector參數爲綁定插件的元素,meunId爲快捷菜單元素,options爲配置對象。
例如,選中頁面<textarea>元素,點擊右鍵,彈出插件綁定的快捷菜單,點擊菜單中的各個選項,便在頁面中顯示操作的對應名稱。
<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://static.mukewang.com/img/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://static.mukewang.com/img/52e4b3680001424900160016.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".title").contextMenu("sysMenu",
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您點擊了“保存”項");
},
'Li4': function (Item) {
$(".tip").show().html("您點擊了“退出”項");
}
}
});
});
</script>
</body>
8、自定義對象級插件lifocuscolor插件
自定義的lifocuscolor插件可以在<ul>元素中,鼠標在表項<li>元素移動時,自定義其獲取焦點時的背景色,即定義<li>元素選中時的背景色,調用格式爲:
$(Id).focusColor(color)
其中,參數Id表示<ul>元素的Id號,color表示<li>元素選中時的背景色。
例如,在頁面中,調用自定義的lifocuscolor插件,自定義<li>元素選中時的背景色,
<head>
<title>自定義對象級別插件</title>
<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.lifocuscolor.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">對象級別的插件</span>
</div>
<div class="content">
<ul id="u1">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#u1").focusColor("red");//調用自定義的插件
})
</script>
</body>
9、自定義類級別插件—— twoaddresult
通過調用自定義插件twoaddresult中的不同方法,可以實現對兩個數值進行相加和相減的運算,導入插件後,調用格式分別爲:
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述調用格式分別爲計算兩數值相加和相減的結果,p1和p2爲任意數值。
例如,在頁面的兩個文本框中輸入任意數值,點擊“計算”按鈕調用自定義插件中$.addNum()方法,計算兩數值的和並將結果顯示在另一文本框中,
<head>
<title>自定義類級別插件</title>
<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.twoaddresult.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定義類級別插件</span>
<span class="fr">
<input id="btnCount" type="button" value="計算" />
</span>
</div>
<div class="content">
兩數相減:
<input id="Text1" type="text" class="txt" />
-
<input id="Text2" type="text" class="txt" />
=
<input id="Text3" type="text" class="txt" />
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.subNum($("#Text1").val(),$("#Text2").val())
);
});
});
</script>
</body>
最近在整理一些資源工具,放在網站分享 http://tools.maqway.com
歡迎關注公衆號:麻雀唯伊 , 不定時更新資源文章,生活優惠,或許有你想看的