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事件類型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+" 電話:"+con.tel+"</option>" }) } $('#agent_id').html(opt_str); } }); }
去ajax獲取相應(yīng)的代理商數(shù)據(jù)。
改造插件完成。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(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指向問題
- 淺談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-02jquery簡(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-12jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。2011-09-09jQuery timers計(jì)時(shí)器簡(jiǎn)單應(yīng)用說(shuō)明
大家都知道jQuery很強(qiáng)大,也有很多效果很帥的插件,下面介紹下jQuery定時(shí)器插件jQuery Timers,那JS都自帶有定時(shí)器,為什么要使用Jquery的呢?2010-10-10jQuery圖片拖動(dòng)組件Dropzone用法示例
這篇文章主要介紹了jQuery圖片拖動(dòng)組件Dropzone用法,結(jié)合實(shí)例形式分析了圖片拖動(dòng)組件Dropzone的功能、安裝及具體使用方法,需要的朋友可以參考下2017-01-01jQuery簡(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-03jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選,邏輯很簡(jiǎn)單,實(shí)現(xiàn)代碼也沒有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單,代碼也很簡(jiǎn)潔,精辟!2009-11-11