jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
本文實(shí)例講述了jQuery插件擴(kuò)展的方法。分享給大家供大家參考,具體如下:
<script language="javascript" type="text/javascript">
function doSomething(callback) {
// …
// Call the callback
callback('stuff', 'goes', 'here'); // 給callback賦值,callback是個(gè)函數(shù)變量
}
function foo1(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
var foo2 = function(a,b,c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
doSomething(function(a,b,c){
alert(a + " " + b + " " + c); // function函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
});
</script>
callback這個(gè)參數(shù)必須是函數(shù)才有效。才能起到回調(diào)的作用。
<script language="javascript" type="text/javascript">
function doSomething(callback) {
// …
// Call the callback
if(typeof callback === 'function'){
callback('stuff', 'goes', 'here'); // 給callback賦值,callback是個(gè)函數(shù)變量
}else{
alert('jb51.net');
}
}
function foo1(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
var foo2 = function(a,b,c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
doSomething(function(a,b,c){
alert(a + " " + b + " " + c); // function函數(shù)將使用callback函數(shù)中的數(shù)據(jù) stuff goes here
});
var foo3 = 'a';
doSomething(foo3);
</script>
foo3不是函數(shù)的時(shí)候,彈出jb51.net
jQuery實(shí)例
原函數(shù)
$.fn.citySelect=function(settings)
添加回調(diào)
$.fn.citySelect=function(settings, changeHandle) // 添加回調(diào)函數(shù)changeHandle
給回調(diào)函數(shù)賦值
//選項(xiàng)變動(dòng)賦值事件
var selectChange = function (areaType) {
if(typeof changeHandle === 'function'){ // 判斷callback是否是函數(shù)
var prov_id = prov_obj.get(0).selectedIndex;
var city_id = city_obj.get(0).selectedIndex;
var dist_id = dist_obj.get(0).selectedIndex;
if(!settings.required){
prov_id--;
city_id--;
dist_id--;
};
if(dist_id<0){
var data = {
prov: city_json.citylist[prov_id].p,
city: city_json.citylist[prov_id].c[city_id].n,
dist: null
};
}else{
var data = {
prov: city_json.citylist[prov_id].p,
city: city_json.citylist[prov_id].c[city_id].n,
dist: city_json.citylist[prov_id].c[city_id].a[dist_id].s
};
}
changeHandle(data, areaType); // 返回兩個(gè)處理好的數(shù)據(jù)
}
};
獲取省市縣數(shù)據(jù)data以及觸發(fā)的change事件類(lèi)型areaType
// 選擇省份時(shí)發(fā)生事件
prov_obj.bind("change",function(){
cityStart();
selectChange('prov'); // 返回?cái)?shù)據(jù)
});
// 選擇市級(jí)時(shí)發(fā)生事件
city_obj.bind("change",function(){
distStart();
selectChange('city'); // 返回?cái)?shù)據(jù)
});
// 選擇區(qū)級(jí)時(shí)發(fā)生事件
dist_obj.bind("change",function(){
selectChange('dist'); // 返回?cái)?shù)據(jù)
});
在各個(gè)事件中執(zhí)行
前端使用
$("#s_city").citySelect({
prov: "江蘇省",
city: "宿遷市",
dist: "宿城區(qū)",
nodata: "none"
},
function(data, type) {
selectAgent(data.city, data.dist);
});
使用回調(diào)回來(lái)的data數(shù)據(jù),用于selectAgent函數(shù)中
function selectAgent(city,district){
$.ajax({
type:"POST",
url:"{sh::U('Index/ajax',array('todo'=>'getagent'))}",
data:"city="+city+"&district="+district,
success:function(json){
json = JSON.parse(json);
opt_str = "<option value=''>-請(qǐng)選擇-</option>"
if(json.status == 1){
$.each(json.data,function(index,con){
opt_str += "<option value="+con.id+">"+con.name+" 電話(huà):"+con.tel+"</option>"
})
}
$('#agent_id').html(opt_str);
}
});
}
去ajax獲取相應(yīng)的代理商數(shù)據(jù)。
改造插件完成。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery回調(diào)函數(shù)的定義及用法實(shí)例
- jQuery 回調(diào)函數(shù)(callback)的使用和基礎(chǔ)
- 從零學(xué)jquery之如何使用回調(diào)函數(shù)
- jQuery AJAX回調(diào)函數(shù)this指向問(wèn)題
- 淺談jquery回調(diào)函數(shù)callback的使用
- 一個(gè)超簡(jiǎn)單的jQuery回調(diào)函數(shù)例子(分享)
- jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)
- jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
- jQuery.Callbacks()回調(diào)函數(shù)隊(duì)列用法詳解
- jquery 回調(diào)操作實(shí)例分析【回調(diào)成功與回調(diào)失敗的情況】
相關(guān)文章
jQuery多個(gè)input求和的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery多個(gè)input求和的實(shí)現(xiàn)方法,涉及jQuery獲取input表單元素值及運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2015-02-02
jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
這篇文章主要介紹了jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法,涉及jQuery定時(shí)函數(shù)操作及日期與實(shí)現(xiàn)的運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。2011-09-09
jQuery timers計(jì)時(shí)器簡(jiǎn)單應(yīng)用說(shuō)明
大家都知道jQuery很強(qiáng)大,也有很多效果很帥的插件,下面介紹下jQuery定時(shí)器插件jQuery Timers,那JS都自帶有定時(shí)器,為什么要使用Jquery的呢?2010-10-10
jQuery圖片拖動(dòng)組件Dropzone用法示例
這篇文章主要介紹了jQuery圖片拖動(dòng)組件Dropzone用法,結(jié)合實(shí)例形式分析了圖片拖動(dòng)組件Dropzone的功能、安裝及具體使用方法,需要的朋友可以參考下2017-01-01
jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法,涉及jQuery的ajax調(diào)用及頁(yè)面樣式操作技巧,需要的朋友可以參考下2016-03-03
jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選,邏輯很簡(jiǎn)單,實(shí)現(xiàn)代碼也沒(méi)有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單,代碼也很簡(jiǎn)潔,精辟!2009-11-11

