jQuery：常用插件
jQuery常用插件
一、jQueryUI 引用jQuery.ui.js
（一）對話框（dialog）
$('#a').dialog({
title : '中華民國' , //對話框標題
buttons : {
'按鈕' : function(){}
},
position : 'left top' , //設置對話框位置，默認為center。單left表示左居中
show : false, //顯示對話框時顯示的效果，默認為false，淡入淡出效果
hide : false, //隱藏對話框時顯示的效果，默認為false，淡入淡出效果
width : 300, //對話框的寬度。默認為 300，單位是像素。
height :500, //對話框的高度。默認為 auto，單位是像素。
minWidth :200, //對話框的最小寬度。默認 150，單位是像素。
minHeight :300, //對話框的最小高度。默認 150，單位是像素。
maxWidth :100, //對話框的最大寬度。默認 auto，單位是像素。
maxHeight :200, //對話框的最大高度。默認 auto，單位是像素。
autoOpen : false, //默認為 true，調用 dialog()方法時就會打開對話框；
draggable : true, //默認為 true，可以移動對話框，false 無法移動。
resizable : true, //默認為 true，可以調整對話框大小，false 無法調整
modal : ture, //默認為 false，對話框外可操作，true 對話框會遮罩
closeText : '關閉', //默認為無，設置關閉按鈕的 title 文字
focus : function(e,ui){}, //取得焦點時觸發，ui為空
create : function(e,ui){}, //創建時觸發，ui為空
open : function(e,ui){}, //首顯或調用dialog('open')時，ui為空
beforeClose : function(e,ui){}, //關前或調用dialog('close')時，ui為空
close : function(e,ui){}, //關時或調用dialog('close')時，ui為空
drag : function(e,ui){ //每次移動時調用
ui.positon.top; //與offset同，還有一left，距離瀏覽器の上/左的距離
ui.offset.left; //與position同，還有一top
},
dragStart : function(e,ui){ //每次移動前調用
ui.positon.top; //與offset同，還有一left，距離瀏覽器の上/左的距離
ui.offset.left; //與position同，還有一top
},
dragStop : function(e,ui){ //停止移動時調用
ui.positon.top; //與offset同，還有一left，距離瀏覽器の上/左的距離
ui.offset.left; //與position同，還有一top
},
resize : function(e,ui){ //改變大小時調用
ui.size.width; //得到對話框の寬度，還有height
ui.position.top; //得到對話框的座標，有兩個子屬性：top 和 left。
ui.originalSize.height; //得到對話框原始的大小，有兩個子屬性：width 和 height。
ui.originalPosition.top; //得到對話框原始的座標，有兩個子屬性：top 和 left
},
resizeStart : function(e,ui){}, //改變大小前調用，ui同resize
resizeStop : function(e,ui){} //改變大小後調用，ui同resize
}
dialog方法：open、close、destory、isOpen、widget(獲取dialogのjQuery對象)
用法：$('#a').dialog('open');
設置值：$('#a').dialog('option' , 'title' , '中華')
獲取值：$('#a').dialog('option' , 'title' )
dialog事件：
dialogfocus //得到焦點時觸發
dialogopen //顯示時觸發
dialogbeforeclose //將要關閉時觸發
dialogclose //關閉時觸發
dialogdrag //每一次移動時觸發
dialogdragstart //開始移動時觸發
dialogdragstop //移動結束後觸發
dialogresize //每次調整大小時觸發
dialogresizestart //開始調整大小時觸發
dialogresizestop //結束調整大小時觸發
用法：$('#reg').on('dialogclose', function () {});
show和hideの動畫效果：
blind //對話框從頂部顯示或消失
bounce //對話框斷斷續續地顯示或消失，垂直運動
clip //對話框從中心垂直地顯示或消失
slide //對話框從左邊顯示或消失
drop //對話框從左邊顯示或消失，有透明度變化
fold //對話框從左上角顯示或消失
highlight //對話框顯示或消失，伴隨著透明度和背景色的變化
puff //對話框從中心開始縮放。顯示時“收縮”，消失時“生長”
scale //對話框從中心開始縮放。顯示時“生長”，消失時“收縮”
pulsate //對話框以閃爍形式顯示或消失
（二）按鈕（button）
$('#search_button').button({
disabled : false, //按鈕是否禁用
icons : { //設置圖標
primary : 'ui-icon-search', //按鈕前面の圖標
secondary : 'ui-icon-search', //按鈕後面の圖標
},
label : '查找',
text : false,
});
buttonの方法：
$('#a').button('disable') //禁用按鈕
$('#a').button('enable') //啟用按鈕
$('#a').button('destroy') //刪除按鈕，直接阻斷了 button
$('#a').button('refresh') //更新按鈕佈局。
$('#a').button('widget') //獲取按鈕的 jQuery 對象
獲取值：button('option', param) //獲取 options 屬性的值
設置值：button('option', param, value) //設置 options 屬性的值
button 按鈕不但可以設置普通的按鈕，對於單選框、複選框同樣有效。
設置成button樣式：
$('#c input[type=radio]').button();
或者 $('#v').buttonset();
（三）懸浮提示框（tooltip）
$('[title]').tooltip({
disabled : false, //禁止顯示
content : '改變文字', //設置懸浮文字
items : 'input', //設置範圍，只在inputのtitle中使用
tooltipClass : 'reg_tooltip' //引用CSS樣式
position : { //設置位置
my : 'left center', //以目標點左下角為基準
at : 'right+5 center' //at以my為基準
},
show : false, //顯示時，淡入
hide : false, //關閉時，淡出
create : function(e,ui){} //創建時調用，ui為空
open : function(e,ui){} //打開時調用，ui為tooltip對象
close : function(e,ui){} //關閉時調用，ui為tooltip對象
}
tooltipの方法：
$('#a').tooltip('open') //打開工具提示
$('#a').tooltip('close') //關閉工具提示
$('#a').tooltip('disable') //禁用工具提示
$('#a').tooltip('enable') //啟用工具提示
$('#a').tooltip('destroy') //刪除工具提示，直接阻斷了 tooltip。
$('#a').tooltip('widget') //獲取工具提示的 jQuery 對象
$('#a').tooltip('option', param) //獲取 options 屬性的值
$('#a').tooltip('option', param, value) //設置 options 屬性的值
tooltipの事件：
dialogopen //顯示時觸發
tooltipclose //每一次移動時觸發
用法：$('#reg').on('tooltipopen', function () {});
（四）自動補全（complete）
$('#a').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], //設置數據源
disabled : false, //是否禁用
minLength : 2, //最小長度
delay : 50, //延時
autoFocus : true, //第一個項目是否被自動聚焦
position : { //設置位置
my : 'left center', //以目標點左下角為基準
at : 'right center' //at以my為基準
},
create : function(e,ui){}, //創建時調用，ui為空
open : function(e,ui){}, //打開時調用，ui為空
close : function(e,ui){}, //關閉時調用，ui為空
change : function(e,ui){}, //失去焦點且值改變時調用，ui為空
search : function(e,ui){}, //當自動補全搜索完成後調用，ui為空
response : function(e,ui){ //自動搜完後，菜單顯示前
ui.content[0].label; //label只讀，content為子對象
ui.content[1].value='l'; //value設置值
},
focus : function(e,ui){ //獲取焦點時觸發
ui.item.label; //取得其值
ui.item.value='l'; //設置其值
},
select : function(e,ui){ //當自動補全獲被選定時觸發
ui.item.label; //取得其值
ui.item.value='l'; //設置其值
}
})
autocompleteの方法：
$('#a').autocomplete('close') //關閉自動補齊
$('#a').autocomplete('disable') //禁用自動補齊
$('#a').autocomplete('enable') //啟用自動補齊
$('#a').autocomplete('destroy') //刪除自動補齊，直接阻斷。
$('#a').autocomplete('widget') //獲取工具提示的 jQuery 對象
$('#a').autocomplete('search',value) //在數據源獲取匹配的字串。
$('#a').autocomplete('option', param) //獲取 options 屬性的值
$('#a').autocomplete('option', param,value) //設置 options 屬性的值
autocompleteの事件：
autocompleteopen //顯示時觸發
autocompleteclose //關閉時觸發
autocompletesearch //查找時觸發
autocompletefocus //獲得焦點時觸發
autocompleteselect //選定時觸發
autocompletechange //改變時觸發
autocompleteresponse //搜索完畢後，顯示之前
用法：$('#reg').on('autocompleteopen', function () {});
（五）日曆設置（datepicker）
$('#date').datepicker({
dateFormat : 'yy-mm-dd', //設置日期格式
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], //設置曜日名
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], //設置曜日短格式
dayNamesMin : ['日','一','二','三','四','五','六'], //設置曜日最小格式
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], //設置月份名
monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], //設置月份短格式
altField : '#abc', //將選定日期輸出到#abcのinput域
altFormat : 'dd/mm/yy', //設置輸出域の選定日期格式
appendText : '日曆', //在輸出域後添加文本
showWeek : true, //是否顯示周
weekHeader : '周', //周名字
firstDay : 1, //從週一開始，週日到週六(0-6)
disabled : true, //是否禁止
numberOfMonths : 3, //同時顯示の3個月份
numberOfMonths : [3,2], //同時顯示3行2列共6個月份
showOtherMonths : true, //是否顯示上/下個月份在本頁の顯示，顯示為灰+數字，不顯為空白
selectOtherMonths : true, //上/下個月份的日期是否可選擇
changeMonth : true, //月份菜單可下拉
changeYear : true, //年份菜單可下拉
isRTL : true, //是否從由右向左繪製表格
autoSize : true, //是否自動調整輸出域的大小
showOn : 'button', //顯示方式，button點擊，focus聚焦，both兼二
buttonText : '日曆', //button上的文本
buttonImage : 'img/calendar.gif', //觸發按鈕上的圖片
buttonImageOnly : true, //是否用圖片替代按鈕
showButtonPanel : true, //是否開啟按鈕面板
closeText : '關閉', //按鈕面板上close按鈕的文本
currentText : '今天dd', //按鈕面板上today按鈕の文本
nextText : '下個月mm', //設置下個月の文本
prevText : '上個月mm', //設置上個月の文本
navigationAsDateFormat : true, //文本中是否用format格式
yearSuffix : '年', //年份後面添加的文本
showMonthAfterYear : true, //將月份放到年份後面
//日期的限制優先順序，minDate和maxDate最高
maxDate : 0, //設置最大到今天。或者new Date(2017,1,14)到2017-1-14
minDate : -8000, //設置最小日期到今天之前8000天
hideIfNoPrevNext : true, //如果上/下月不存在則隱藏按鈕
//而maxDate和minDate只是限制日期，而年份的限制的優先順序yearRange最高
yearRange : '1950:2020', //設置年份範圍，'-100:-1'：前100年到前1年，'-50:0'：前50年，'-50:+20'：前50年到後20年，'-/3:+0'、'-3:-0'：前3年到今年，'+0:+2'、'-0:+2'：今年到後2年
defaultDate : -1, //默認日期前一天，'-1m+3'：一月前の後3天
gotoCurrent : true, //點擊今日且回車後選擇的是當前選定的日期，而不是今日。
duration : 1000, //設置動畫持續時間
showAnim : 'slide', //設置動畫，默認為false，不帶動畫
beforeShow : function () {}, //日曆顯示之前被調用
beforeShowDay : function (date) {//顯示每個日期時調用，返回一數組
if (date.getDate() == 1) {
return [false, 'a', '不能選擇1號']; //參數1：該參數是否可被選，參數2：選用のclass
} else { //參數3：該字串上顯示の提示
return [true];
}
}
onChangeMonthYear : function (year, month, inst) { //日曆中年份或月份改變時啟動
alert(year);
alert(month);
alert(inst.id); //inst調用一些屬性，獲取值
}
onSelect : function (dateText, inst) { //選擇日曆時調用
alert(dateText); //dateText為當時選中的日期字串
}
onClose : function (dateText, inst) {} //關閉日曆時調用
}
方法：show 、hide、getDate(獲取當前選定日曆)、destroy、widget、isDisabled、refresh
用法：$('#s').datepicker('show')
特殊：$('#s').datepicker('setDate',date) //設置當前選定日期
$('#s').datepicker('option', param) //獲取 options 屬性的值
$('#s').datepicker('option', param,value) //設置 options 屬性的值
動畫效果：
blind //日曆從頂部顯示或消失
bounce //日曆斷斷續續地顯示或消失，垂直運動
clip //日曆從中心垂直地顯示或消失
slide //日曆從左邊顯示或消失
drop //日曆從左邊顯示或消失，有透明度變化
fold //日曆從左上角顯示或消失
highlight //日曆顯示或消失，伴隨著透明度和背景色的變化
puff //日曆從中心開始縮放。顯示時“收縮”，消失時“生長”
scale //日曆從中心開始縮放。顯示時“生長”，消失時“收縮”
pulsate //日曆以閃爍形式顯示或消失
fadeIn //日曆顯示或消失時伴隨透明度變化
日期格式：
d //月份中的天，從 1 到 31
dd //月份中的天，從 01 到 31
o //年份中的天，從 1 到 366
oo //年份中的天，從 001 到 366
D //星期中的天的縮寫名稱（Mon、Tue 等）
DD //星期中的天的全寫名稱（Monday、Tuesday 等）
m //月份，從 1 到 12
mm //月份，從 01 到 12
M //月份的縮寫名稱（Jan、February 等）
MM //月份的全寫名稱（January、February 等）
y //兩位數字的年份（14 表示 2014）
yy //四位數字的年份（2014）
@ //從 01/01/1997 至今的毫秒數
（六）選項卡
<div id='tabs'>
<ul><li><a href='#tab1'>tab1</a></li></ul>
<div id='tab1'>t1</div>
</div>
$('#tabs').tabs({
collapsible : true, //是否允許折疊
disabled : [0,1], //禁用第1和第2個tab
disabled : true, //禁用所有的tab
event : 'mouseover', //鼠標移動到上面時觸發，默認為click
active : 1, //首次顯示第一個tab
active : true, //首顯時是否折疊。false折疊，都需要collapsible為true
heightStyle : 'content', //以內容縮展，為默認，auto以最高為標準，fill填充一定的可用高度
show : true, //關閉時，淡入淡出
hide : true, //隱藏時，淡入淡出
create : function (event, ui) { //創建tab時觸發
alert($(ui.tab.get()).html()); //tab裏の內容
alert($(ui.panel.get()).html()); //內容選項の內容
},
activate : function (event, ui) { //切換到另一個活動卡後觸發
alert($(ui.oldTab.get()).html());
alert($(ui.newTab.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newPanel.get()).html());
},
beforeActivate : function (event, ui) { //切換到另一個活動卡之前觸發
alert($(ui.oldTab.get()).html());
alert($(ui.newTab.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newPanel.get()).html());
},
load : function (event, ui) { //ajax遠程加載文檔後觸發
alert($(ui.tab.get()).html());
alert($(ui.panel.get()).html());
},
beforeLoad : function (event, ui) { //ajax遠程加載文檔前觸發
alert($(ui.tab.get()).html());
alert($(ui.panel.get()).html());
ui.jqXHR.success(function (responseText) {
alert(responseText);
});
ui.ajaxSettings.url = 'tab3.html';
},
});
方法：
$('#tabs').tabs('disable', 0); //禁用第一個選項卡
$('#tabs').tabs('enable', 0); //啟用第一個選項卡
$('#tabs').tabs('disable') //禁用選項卡
$('#tabs').tabs('enable') //啟用選項卡
$('#tabs').tabs('load') //通過 ajax 獲取選項卡內容
$('#tabs').tabs('widget') //獲取選項卡的 jQuery 對象
$('#tabs').tabs('destroy') //刪除選項卡，直接阻斷了 tabs。
$('#tabs').tabs('refresh') //更新選項卡，比如高度。
$('#tabs').tabs('option', param) //獲取 options 屬性的值
$('#tabs').tabs('option', param, value) //設置 options 屬性的值
$('#button').click(function () {
$('#tabs').tabs('load', 0); //加載第一個選項卡
});
事件：
tabsload //Ajax 加載後觸發
tabsbeforeload //Ajax 加載前觸發
tabsactivate //選項卡切換時觸發
tabsbeforeactivate //選項卡切換前觸發
用法：$('#tabs').on('tabsload', function (event, ui) {});
（七）折疊菜單
<div id="accordion">
<h1>菜單 1</h1>
<div>內容 1</div>
</div>
$('#accordion').accordion({
collapsible : true, //是否允許折疊
disabled : true, //是否禁用
event : 'mouseover', //觸發條件，默認為click
active : 1, //首顯第2頁
active : true, //首顯是否顯示，需collapsible為true
heightStyle : 'content', //自適應，auto為默認，還有fill
header : 'h3', //折疊標籤頭
icons: {
"header": "ui-icon-plus", //頭部圖標
"activeHeader": "ui-icon-minus", //活動頭部圖標
},
create : function (event, ui) { //當折疊菜單創建時觸發
alert($(ui.header.get()).html());
alert($(ui.panel.get()).html());
},
activate : function (event, ui) { //當切換到一個菜單時觸發
alert($(ui.oldHeader.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newHeader.get()).html());
alert($(ui.newPanel.get()).html());
},
beforeActivate : function (event, ui) { //當切換到一個菜單之前觸發
alert($(ui.oldHeader.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newHeader.get()).html());
alert($(ui.newPanel.get()).html());
},
});
方法：
$('#accordion').accordion('disable'); //禁用折疊菜單
$('#accordion').accordion('enable'); //啟用折疊菜單
$('#accordion').accordion('widget'); //獲取折疊菜單 jQuery 對象
$('#accordion').accordion('refresh'); //更新折疊菜單
$('#accordion').accordion('destroy'); //刪除 accordion 折疊菜單
$('#accordion').accordion('option', 'active'); //得到 accordion 的 options 值
$('#accordion').accordion('option', 'active', 1); //設置 accordion 的 options 值
事件：
$('#accordion').on('accordionactivate', function () {}); //菜單切換時觸發
$('#accordion').on('accordionbeforeactivate ', function () {}); //菜單切換前觸發
二、表單驗證（validate） 引用jQuery.validate.js
$('#a').validate({
rules:{
user:{ //user為name名
required:true, //必須輸入字段
email:true, //必須輸入正確格式的電子郵件
url:true, //必須輸入正確格式的網址
date:true, //必須輸入正確格式的日期（IE6 驗證出錯）
dateISO:true, //必須輸入正確格式的日期(ISO)（只驗證格式，不驗證有效）
number:true, //必須輸入合法的數字(負數，小數)
digits:true, //必須輸入正整數
creditcard:true, //必須輸入合法的信用卡號，例如：5105105105105100
equalTo:"#field", //輸入值必須和#field 相同
minlength:5, //輸入長度最小是 5 的字串(漢字算一個字元)
maxlength:10, //輸入長度最多是 10 的字串(漢字算一個字元)
rangelength:[5,10], //輸入長度介於 5 和 10 之間的字串")(漢字算一個字元)
range:[5,10], //輸入值必須介於 5 和 10 之間
min:5, //輸入值不能小於 5
max:10, //輸入值不能大於 10
remote:"check.php", //使用 ajax 方法調用 check.php 驗證輸入值
remote : {
url : 'user.php', //用來驗證賬戶是否被用等
type : 'POST',
dataType : 'json',
data : {},
},
},
}，
messages:{
user : {
required : '帳號不得為空！', //提示
minlength : jQuery.format('帳號不得小於{0}位！'), //{0}為第一個參數的值
rangelength : jQuery.format('帳號限制在{0}-{1}位！'), //{1}為第二個參數的值
}
},
debug : true, //是否調試模式，禁用提交
ignore : '#p', //忽略某字段の驗證
submitHandler : function (form) {
//可以執行 ajax 提交，並且無須 debug:true 阻止提交了
},
groups : { //群組錯誤提示
myerror : 'user pass',
},
//顯示群組的錯誤提示
focusInvalid : false,
errorPlacement : function (error, element) {
$.each(error, function (index, value) {
$('.myerror').html($('.myerror').html() + $(value).html());
})
},
groups : { //群組錯誤提示，分開
error_user : 'user',
error_pass : 'pass'
},
errorPlacement : function (error, element) { //將群組的錯誤指定存放位置
error.appendTo('.myerror');
},
errorClass : 'error_list', //設置錯誤提示的 class 名
errorElement : 'p', //設置錯誤提示的標籤
errorLabelContainer : 'ol.error', //統一包裹錯誤提示
wrapper : 'li', //在外層包裹一層li標籤，與上合用
success : 'success', //設置成功後加載的 class
success : function (label) { //使用方法加載 class 並添加文本
label.addClass('success').text('ok');
},
highlight: function(element, errorClass) { //高亮顯示有錯誤的元素，變色式
$(element).fadeOut(function() {
$(element).fadeIn()
})
},
highlight: function(element, errorClass) { //高亮顯示有錯誤的元素，變色式
$(element).css('border', '1px solid red');
},
unhighlight : function (element, errorClass) { //成功的元素移出錯誤高亮
$(element).css('border', '1px solid #ccc');
},
invalidHandler : function (event, validator) { //表單提交時獲取資訊
var errors = validator.numberOfInvalids();
if (errors) {
$('.myerror').html('您有' + errors + '個表單元素填寫非法！');
}
},
showErrors : function (errorMap, errorList) { //獲取錯誤提示句柄，不用提交及時獲取值
var errors = this.numberOfInvalids();
if (errors) {
$('.myerror').html('您有' + errors + '個表單元素填寫非法！');
} else {
$('.myerror').hide();
}
this.defaultShowErrors(); //執行默認錯誤
},
showErrors : function (errorMap, errorList) { //獲取錯誤提示句柄，errorList
alert(errorList[0].message); //得到錯誤資訊
alert(errorList[0].element); //當前錯誤的表單元素
},
特殊默認事件，不建議修改
onsubmit : false, //默認是 true，取消提交驗證
//設置為 false 會導致直接傳統提交，不會實現驗證功能，一般是用於 keyup/click/blur驗證提交。
onfocusout : false, //默認為 true，設置滑鼠離開不觸發驗證
onkeyup : false, //默認為 true，設置鍵盤按下彈起不觸發驗證
//只要設置了，在測試的流覽器不管是 false 還是 true 都不觸發了。
onclick : false, //默認為 true，設置點擊 checkbox 和 radio 點擊不觸發驗證
focusInvalid : false, //默認為 true，設置錯誤提示後，無法獲取焦點
focusCleanup : true, //默認為 false，提示錯誤時，隱藏錯誤提示，不能和 focusInvalid 一起用，衝突，如果表單元素設置了 title 值，且 messages 為默認，就會讀取 title 值的錯誤資訊，我們
可以通過 ignoreTitle : true，設置為 true，遮罩這一個功能。
ignoreTitle : true, //默認為 false,是否遮罩titleの值
});
禁用多個表單提交：
$.validator.setDefaults({
debug : true,
});
$('#reg').valid(); //全部有效返回 true，判斷表單所驗證的元素是否全部有效
$('#user').rules('remove'); //刪除 user 的所有驗證規則
$('#user').rules('remove', 'minlength min max'); //刪除 user 的指定驗證規則
$.validator.addMethod('code', function (value, element) { //添加自定義驗證
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, '請正確填寫您的郵遞區號');
rules : { //調用自定義驗證
code : {
required : true,
code : true,
}
},
三、Form-Ajax插件 需引入jquery.form.js
$('#f').ajaxForm(function(){}); //直接實現ajax提交，自動阻止默認行為，提交目標為action指向，方式是method提供的。
$('#f').submit(function(){ //不會阻止默認行為，由於需要驗證，此法更合適
$(this).ajaxSubmit(function(){});
}
詳盡用法：
$('#reg').submit(function () {
$(this).ajaxSubmit({
url : 'test.php', //設置提交的 url，可覆蓋 action 屬性
target : '#box', //伺服器返回的內容存放在#box 裏
type : 'POST', //GET,POST
dataType : null, //xml,json,script，默認為 null
clearForm : true, //成功提交後，清空表單
resetForm : true, //成功提交後，重置表單
data : { //增加額外的數據提交
aaa : 'bbb', ccc : 'ddd'. },
beforeSubmit : function (formData, jqForm, options) {
alert(formData[0].name); //得到傳遞表單元素的 name
alert(formData[0].value); //得到傳遞表單元素的 value
alert(jqForm); //得到 form 的 jquery 對象
alert(options); //得到目前 options 設置的屬性
alert('正在提交中！！！');
return true;
},
success : function (responseText, statusText) { //成功後回調
alert(responseText + statusText); //返回值+返回狀態
},
error : function (event, errorText, errorType) { //錯誤時調用
alert(errorText + errorType); //錯誤文本+錯誤類型
},
});
return false;
});
表單方法：
alert($('#reg').formSerialize()); //表單序列化
alert($('#reg #user').fieldSerialize()); //序列化某一個字段
alert($('#reg #user').fieldValue()); //得到某個字段的 value 值
$('#reg').resetForm() //重置表單
$('#reg #user').clearFields(); //清空某個字段
四、cookie插件 需引入jquery.cookie.js
$.cookie('user', 'bnbbs'); //生成一個 cookie：
$.cookie('user', 'bnbbs', { //設置 cookie 參數
expires : 7, //過期時間，7 天後
path : '/', //設置路徑，上一層
domain : 'www.ycku.com', //設置功能變數名稱
secure : true, //默認為 false，需要使用安全協議 https
});
方法：
$.cookie.raw = true; //關閉編碼/解碼，默認為 false
alert($.cookie('user')); //讀取 cookie 數據
alert($.cookie()); //讀取所有 cookie 數據
注意：讀取所有的 cookie 是以對象鍵值對存放的，所以，也可以$.cookie().user 獲取。
$.removeCookie('user'); //刪除 cookie
$.removeCookie('user', {path : '/',}); //刪除指定路徑 cookie
