jQuery插件擴展實例【添加回調(diào)函數(shù)】
本文實例講述了jQuery插件擴展的方法。分享給大家供大家參考,具體如下:
<script language="javascript" type="text/javascript"> function doSomething(callback) { // … // Call the callback callback('stuff', 'goes', 'here'); // 給callback賦值,callback是個函數(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這個參數(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是個函數(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ù)的時候,彈出jb51.net
jQuery實例
原函數(shù)
$.fn.citySelect=function(settings)
添加回調(diào)
$.fn.citySelect=function(settings, changeHandle) // 添加回調(diào)函數(shù)changeHandle
給回調(diào)函數(shù)賦值
//選項變動賦值事件 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); // 返回兩個處理好的數(shù)據(jù) } };
獲取省市縣數(shù)據(jù)data以及觸發(fā)的change事件類型areaType
// 選擇省份時發(fā)生事件 prov_obj.bind("change",function(){ cityStart(); selectChange('prov'); // 返回數(shù)據(jù) }); // 選擇市級時發(fā)生事件 city_obj.bind("change",function(){ distStart(); selectChange('city'); // 返回數(shù)據(jù) }); // 選擇區(qū)級時發(fā)生事件 dist_obj.bind("change",function(){ selectChange('dist'); // 返回數(shù)據(jù) });
在各個事件中執(zhí)行
前端使用
$("#s_city").citySelect({ prov: "江蘇省", city: "宿遷市", dist: "宿城區(qū)", nodata: "none" }, function(data, type) { selectAgent(data.city, data.dist); });
使用回調(diào)回來的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=''>-請選擇-</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擴展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery回調(diào)函數(shù)的定義及用法實例
- jQuery 回調(diào)函數(shù)(callback)的使用和基礎(chǔ)
- 從零學jquery之如何使用回調(diào)函數(shù)
- jQuery AJAX回調(diào)函數(shù)this指向問題
- 淺談jquery回調(diào)函數(shù)callback的使用
- 一個超簡單的jQuery回調(diào)函數(shù)例子(分享)
- jQuery學習筆記之回調(diào)函數(shù)
- jQuery實現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
- jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
- jquery 回調(diào)操作實例分析【回調(diào)成功與回調(diào)失敗的情況】
相關(guān)文章
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。2011-09-09jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法,涉及jQuery的ajax調(diào)用及頁面樣式操作技巧,需要的朋友可以參考下2016-03-03jQuery checkbox全選/取消全選實現(xiàn)代碼
用JavaScript使頁面上的一組checkbox全選/取消全選,邏輯很簡單,實現(xiàn)代碼也沒有太難的語法。但使用jQuery實現(xiàn)則更簡單,代碼也很簡潔,精辟!2009-11-11