jQuery 常用插件和UI插件總結筆記

1. jQuery 常用插件

(1). 表單驗證插件——validate

該插件自帶包含必填、數字、URL在内容的驗證規則，即時顯示異常資訊，此外，還允許自定義驗證規則，插件調用方法如下：$(form).validate({options});其中form參數表示表單元素名稱，options參數表示調用方法時的配置對象，所有的驗證規則和異常資訊顯示的位置都在該對象中進行設定。

Jquery Validate 驗證規則

(1)required:true 必輸字段

(2)remote:”check.php” 使用ajax方法調用check.php驗證輸入值

(3)email:true 必須輸入正确格式的電子郵件

(4)url:true 必須輸入正确格式的網址

(5)date:true 必須輸入正确格式的日期

(6)dateISO:true 必須輸入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 隻驗證格式，不驗證有效性

(7)number:true 必須輸入合法的數字(負數，小數)

(8)digits:true 必須輸入整數

(9)creditcard: 必須輸入合法的信用卡号

(10)equalTo:”#field” 輸入值必須和#field相同

(11)accept: 輸入擁有合法字尾名的字元串（上傳檔案的字尾）

(12)maxlength:5 輸入長度最多是5的字元串(漢字算一個字元)

(13)minlength:10 輸入長度最小是10的字元串(漢字算一個字元)

(14)rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字元串”)(漢字算一個字元)

(15)range:[5,10] 輸入值必須介于 5 和 10 之間

(16)max:5 輸入值不能大于5

(17)min:10 輸入值不能小于10

例子：

$(function () {

$("#frmV").validate(

{

rules: {

email:{

required:true, //是否允許為空

email:true //正确的電子郵箱格式

//digits:true //整數

}

errorPlacement: function (error, element) {

error.appendTo(element.parent());

// error.appendTo(".tip");

}

);

});

</script>

詳細網站：http://blog.csdn.net/u013147600/article/details/46816021

(2). 表單插件——form

--通過表單form插件，調用ajaxForm()方法，實作ajax方式向伺服器送出表單資料，并通過方法中的options對象擷取伺服器傳回資料，調用格式如下：$(form). ajaxForm ({options})；其中form參數表示表單元素名稱；options是一個配置對象，用于在發送ajax請求過程，設定發送時的資料和參數。

例子：

$(function () {

var options = {

url: "http://blog.csdn.net/u013147600",

target: ".tip"

}

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

});

</script>

詳細網站：http://blog.csdn.net/zzq58157383/article/details/7718956

http://www.cnblogs.com/linzheng/archive/2010/11/17/1880288.html

(3). 圖檔燈箱插件——lightBox

--該插件可以用圓角的方式展示選擇中的圖檔，使用按鈕檢視上下張圖檔，在加載圖檔時自帶進度條，還能以自動播放的方式浏覽圖檔，調用格式如下：$(linkimage).lightBox({options});其中linkimage參數為包含圖檔的<a>元素名稱，options為插件方法的配置對象。

例子：

$(function () {

$(".divPics a").lightBox({

overlayBgColor: "#666", //圖檔浏覽時的背景色

overlayOpacity: 0.5, //背景色的透明度

containerResizeSpeed: 600 //圖檔切換時的速度

})

});

</script>

詳細網站：http://www.cnblogs.com/lhb25/archive/2011/04/11/2005330.html

http://www.jquerylightbox.com/

(4). 圖檔放大鏡插件——jqzoom

--在調用jqzoom圖檔放大鏡插件時，需要準備一大一小兩張一樣的圖檔，在頁面中顯示小圖檔，當滑鼠在小圖檔中移動時，調用該插件的jqzoom()方法，顯示與小圖檔相同的大圖檔區域，進而實作放大鏡的效果，調用格式如下：$(linkimage).jqzoom({options});其中linkimage參數為包含圖檔的<a>元素名稱，options為插件方法的配置對象。

例子：

$(function () {

$(".content a").jqzoom({ //綁定圖檔放大插件jqzoom

zoomWidth: 123, //小圖檔所選區域的寬

zoomHeight: 123, //小圖檔所選區域的高

zoomType: 'reverse' //設定放大鏡的類型

});

</script>

詳細網站：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html

http://www.oschina.net/p/jqzoom/

(5). cookie插件——cookie

--使用cookie插件後，可以很友善地通過cookie對象儲存、讀取、删除使用者的資訊，還能通過cookie插件儲存使用者的浏覽記錄，它的調用格式為：儲存：$.cookie(key，value)；讀取：$.cookie(key)，删除：$.cookie(key，null);其中參數key為儲存cookie對象的名稱，value為名稱對應的cookie值。

例子：

$(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>

詳細網站：http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html

http://blog.csdn.net/zzq58157383/article/details/7722106

(6). 搜尋插件——autocomplete

--搜尋插件的功能是通過插件的autocomplete()方法與文本框相綁定，當文本框輸入字元時，綁定後的插件将傳回與字元相近的字元串提示選擇，調用格式如下：$(textbox).autocomplete(urlData,[options]);其中，textbox參數為文本框元素名稱，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];

}

}).result(SearchCallback);

function SearchCallback(event, data, formatted) {

$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));

}

});

</script>

詳細網站：http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html

http://blog.csdn.net/daicj88/article/details/6822410 --參數解釋

(7). 右鍵菜單插件——contextmenu

--右鍵菜單插件可以綁定頁面中的任意元素，綁定後，選中元素，點選右鍵，便通過該插件彈出一個快捷菜單，點選菜單各項名稱執行相應操作，調用代碼如下：$(selector).contextMenu(menuId,{options});Selector參數為綁定插件的元素，meunId為快捷菜單元素，options為配置對象。

例子：

$(function () {

$("#btnSubmit").contextMenu("sysMenu",

{ bindings:

{

'Li3': function (Item) {

$(".tip").show().html("您點選了“儲存”項");

'Li4': function (Item) {

$(".tip").show().html("您點選了“退出”項");

}

});

</script>

詳細網站：http://www.blogjava.net/supercrsky/articles/250091.html

http://shadowlin.iteye.com/blog/939938

http://www.open-open.com/ajax/ajax20080504120558.htm

(8).自定義對象級插件——lifocuscolor插件

--自定義的lifocuscolor插件可以在<ul>元素中，滑鼠在表項<li>元素移動時，自定義其擷取焦點時的背景色，即定義<li>元素選中時的背景色，調用格式為：$(Id).focusColor(color) ;其中，參數Id表示<ul>元素的Id号，color表示<li>元素選中時的背景色。

例子：

$(function () {

$("ul").focusColor("red")//調用自定義的插件

})

</script>

詳細網站：http://www.imooc.com/code/428

(9). 自定義類級别插件—— twoaddresult

--通過調用自定義插件twoaddresult中的不同方法，可以實作對兩個數值進行相加和相減的運算，導入插件後，調用格式分别為：$.addNum(p1,p2) 和 $.subNum(p1,p2);上述調用格式分别為計算兩數值相加和相減的結果，p1和p2為任意數值。

詳細網站：http://www.imooc.com/code/429

9.jQuery UI型插件

(1). 拖曳插件——draggable

拖曳插件draggable的功能是拖動被綁定的元素，當這個jQuery UI插件與元素綁定後，可以通過調用draggable()方法，實作各種拖曳元素的效果，調用格式如下：

$(selector). draggable({options});options參數為方法調用時的配置對象，根據該對象可以設定各種拖曳效果，如“containment”屬性指定拖曳區域，“axis”屬性設定拖曳時的坐标方向。

詳細網站：http://www.cnblogs.com/luluping/archive/2009/08/27/1555329.html

http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html

http://www.jb51.net/article/21786.htm

(2). 放置插件——droppable

除使用draggable插件拖曳任意元素外，還可以調用droppable UI插件将拖曳後的任意元素放置在指定區域中，類似購物車效果，調用格式如下：

$(selector).droppable({options})

selector參數為接收拖曳元素，options為方法的配置對象，在對象中，drop函數表示當被接收的拖曳元素完全進入接收元素的容器時，觸發該函數的調用。

例子：

var intsum=0;

$(function () {

$(".drag").draggable();

$(".cart").droppable({

drop: function () {

intsum++;

alert(intsum);

$(this)

.addClass("focus")

.find("#tip").html("");

$(".title span").html(intsum);

}

})

});

</script>

詳細網站：http://blog.csdn.net/fushou/article/details/8061521

http://blog.sina.com.cn/s/blog_6d0dc2a90100qaln.html

(3). 拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置進行拖曳進而形成一個新的元素序列，實作拖曳排序的功能，它的調用格式為：

$(selector).sortable({options});

selector參數為進行拖曳排序的元素，options為調用方法時的配置對象，

例子：

$(function () {

$("ul").sortable({

delay:2,//延時2秒，防止與點選事件沖突

opacity:0.35//設定透明度

})

});

</script>

詳細網站：http://hb-keepmoving.iteye.com/blog/1154618

http://www.jb51.net/article/38761.htm

(4). 面闆折疊插件——accordion

面闆折疊插件可以實作頁面中指定區域類似“手風琴”的折疊效果，即點選标題時展開内容，再點另一标題時，關閉已展開的内容，調用格式如下：

$(selector).accordion({options});

其中，參數selector為整個面闆元素，options參數為方法對應的配置對象。

例子：

<body>

<h3>

<p>咱們結婚吧!</p>

<h3>

<p>咱們交個朋友吧!</p>

</div>

$(function () {

$("#accordion").accordion();

});

</script>

</body>

詳細網站：http://www.cnblogs.com/sunfishlu/archive/2009/09/25/1573678.html

http://www.jeasyui.net/plugins/161.html

demo：http://www.open-open.com/ajax/Accordion.htm

(5). 頁籤插件——tabs

使用頁籤插件可以将<ul>中的<li>選項定義為選項标題，在标題中，再使用<a>元素的“href”屬性設定選項标題對應的内容，它的調用格式如下：

$(selector).tabs({options});

selector參數為頁籤整體外圍元素，該元素包含頁籤标題與内容，options參數為tabs()方法的配置對象，通過該對象還能以ajax方式加載頁籤的内容。

例子：

<body>

<ul>

<li><a href="#tabs-1" target="_blank" rel="external nofollow" >最愛吃的水果</a></li>

<li><a href="#tabs-2" target="_blank" rel="external nofollow" >最喜歡的運動</a></li>

</ul>

</div>

</div>

$(function () {

$("#tabs").tabs ({

//設定各頁籤在切換時的動畫效果

fx: { opacity: "toggle", height: "toggle" },

event: "mousemove" //通過移動滑鼠事件切換頁籤

})

});

</script>

</body>

詳細網站：http://www.cnblogs.com/bestfc/archive/2009/06/08/1498737.html

http://www.jeasyui.com/documentation/tabs.php

(6). 對話框插件——dialog

對話框插件可以用動畫的效果彈出多種類型的對話框，實作JavaScript代碼中alert()和confirm()函數的功能，它的調用格式為：

$(selector).dialog({options});

selector參數為顯示彈出對話框的元素，通常為<div>，options參數為方法的配置對象，在對象中可以設定對話框類型、“确定”、“取消”按鈕執行的代碼等。

例子：

<body>

</div>

</div>

$(function () {

$("#btnDelete").bind("click", function () { //詢問按鈕事件

if ($("#spnName").html() != null) { //如果對象不為空

sys_Confirm("您真的要删除該條記錄嗎？");

return false;

}

});

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>");

}

});

}

</script>

</body>

詳細網站：http://www.cnblogs.com/haogj/archive/2011/02/16/1956523.html

(7). 菜單工具插件——menu

菜單工具插件可以通過<ul>建立多級内聯或彈出式菜單，支援通過鍵盤方向鍵控制菜單滑動，允許為菜單的各個選項添加圖示，調用格式如下：

$(selector).menu({options}); selector參數為菜單清單中最外層<ul>元素，options為menu()方法的配置對象。

例子：

<body>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

$(function () {

$("#menu").menu();

});

</script>

</body>

詳細網站： Demo: http://www.cnblogs.com/xiaoyao2011/archive/2011/10/19/jqueryMenu.html

http://sc.chinaz.com/jiaoben/caidanhaohang.html

http://www.jsfoot.com/jquery/menu/

smartMenu右鍵自定義上下文： http://www.zhangxinxu.com/wordpress/?p=1667

jQuery-menu-aim: http://www.cnblogs.com/naonaoye/archive/2013/03/08/2949504.html

http://www.juheweb.com/js/dh/56.html

jQuery 導航菜單: http://www.neoease.com/wordpress-menubar-6/

(8). 微調按鈕插件——spinner

微調按鈕插件不僅能在文本框中直接輸入數值，還可以通過點選輸入框右側的上下按鈕修改輸入框的值，還支援鍵盤的上下方向鍵改變輸入值，調用格式如下：

$(selector).spinner({options});

selector參數為文本輸入框元素，可選項options參數為spinner()方法的配置對象，在該對象中，可以設定輸入的最大、最小值，擷取改變值和設定對應事件。

例子：

<body>

選擇顔色值</div>

</span>

</div>

$(function () {

//定義變量

var intR = 0, intG = 0, intB = 0, strColor;

$("input").spinner({

//初始化插件

max: 10,

min: 0,

//設定微調按鈕遞增/遞減事件

spin: function (event, ui) {

if (ui.value == 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor = "green";

//設定微調按鈕值改變事件

change: function (event, ui) {

var intTmp = $(this).spinner("value");

if (intTmp < 0) $(this).spinner("value", 0);

if (intTmp > 10) $(this).spinner("value", 10);

if (intTmp == 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor = "green";

}

});

</script>

</body>

來源網站： http://www.css88.com/jquery-ui-api/spinner/

http://www.cnblogs.com/Philoo/archive/2011/10/20/jeasyui_api_spinner.html

(9). 工具提示插件——tooltip

工具提示插件可以定制元素的提示外觀，提示内容支援變量、Ajax遠端擷取，還可以自定義提示内容顯示的位置，它的調用格式如下：

$(selector).tooltip({options});

其中selector為需要顯示提示資訊的元素，可選項參數options為tooltip()方法的配置對象，在該對象中，可以設定提示資訊的彈出、隐藏時的效果和所在位置。

例子：

<body>

工具提示插件</div>

<div>

姓名</label>

</div>

$(function () {

$("input").tooltip({

show: {

effect: "slideDown",

delay: 350

hide: {

effect: "explode",

delay: 350

position: {

my: "left top",

at: "left bottom"

}

});

</script>

</body>

詳細網站： http://www.jb51.net/article/19368.htm

http://www.cnblogs.com/QLeelulu/archive/2008/03/09/1097368.html

學習網站：

http://www.imooc.com/learn/11

Jquery easyUI 中文網：http://www.jeasyui.net/

jQuery 常用插件和UI插件總結筆記

1. jQuery 常用插件

(1). 表單驗證插件——validate

(2). 表單插件——form

(3). 圖檔燈箱插件——lightBox

(4). 圖檔放大鏡插件——jqzoom

(5). cookie插件——cookie

(6). 搜尋插件——autocomplete

(7). 右鍵菜單插件——contextmenu

(8).自定義對象級插件——lifocuscolor插件

(9). 自定義類級别插件—— twoaddresult

9.jQuery UI型插件

(1). 拖曳插件——draggable

(2). 放置插件——droppable

(3). 拖曳排序插件——sortable

(4). 面闆折疊插件——accordion

(5). 頁籤插件——tabs

(6). 對話框插件——dialog

(7). 菜單工具插件——menu

(8). 微調按鈕插件——spinner

(9). 工具提示插件——tooltip

學習網站：

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

用mybatis的generator插件在項目中自動生成dao及entity

JS生成uuid的四種方法

layui多任務上傳添加進度條

jQuery 常用插件和UI插件 總結筆記

1. jQuery 常用插件

(1). 表單驗證插件——validate

(2). 表單插件——form

(3). 圖檔燈箱插件——lightBox

(4). 圖檔放大鏡插件——jqzoom

(5). cookie插件——cookie

(6). 搜尋插件——autocomplete

(7). 右鍵菜單插件——contextmenu

(8).自定義對象級插件——lifocuscolor插件

(9). 自定義類級别插件—— twoaddresult

9.jQuery UI型插件

(1). 拖曳插件——draggable

(2). 放置插件——droppable

(3). 拖曳排序插件——sortable

(4). 面闆折疊插件——accordion

(5). 頁籤插件——tabs

(6). 對話框插件——dialog

(7). 菜單工具插件——menu

(8). 微調按鈕插件——spinner

(9). 工具提示插件——tooltip

學習網站：

繼續閱讀

jQuery 常用插件和UI插件總結筆記