jQuery外掛程式擴充執行個體【添加回呼函數】_jquery

本文執行個體講述了jQuery外掛程式擴充的方法。分享給大家供大家參考，具體如下：

<script language="javascript" type="text/javascript">function doSomething(callback) {  // …   // Call the callback  callback('stuff', 'goes', 'here'); // 給callback賦值，callback是個函數變數}function foo1(a, b, c) {  // I'm the callback  alert(a + " " + b + " " + c);}doSomething(foo1); // foo1函數將使用callback函數中的資料 stuff goes herevar foo2 = function(a,b,c) {  // I'm the callback  alert(a + " " + b + " " + c);}doSomething(foo2); // foo2函數將使用callback函數中的資料 stuff goes heredoSomething(function(a,b,c){  alert(a + " " + b + " " + c); // function函數將使用callback函數中的資料 stuff goes here});</script>

callback這個參數必須是函數才有效。才能起到回調的作用。

<script language="javascript" type="text/javascript">function doSomething(callback) {  // …   // Call the callback  if(typeof callback === 'function'){    callback('stuff', 'goes', 'here'); // 給callback賦值，callback是個函數變數  }else{    alert('jb51.net');  }}function foo1(a, b, c) {  // I'm the callback  alert(a + " " + b + " " + c);}doSomething(foo1); // foo1函數將使用callback函數中的資料 stuff goes herevar foo2 = function(a,b,c) {  // I'm the callback  alert(a + " " + b + " " + c);}doSomething(foo2); // foo2函數將使用callback函數中的資料 stuff goes heredoSomething(function(a,b,c){  alert(a + " " + b + " " + c); // function函數將使用callback函數中的資料 stuff goes here});var foo3 = 'a';doSomething(foo3);</script>

foo3不是函數的時候，彈出jb51.net

jQuery執行個體

原函數

$.fn.citySelect=function(settings)

添加回調

$.fn.citySelect=function(settings, changeHandle) // 添加回呼函數changeHandle

給回呼函數賦值

//選項變動賦值事件var selectChange = function (areaType) {   if(typeof changeHandle === 'function'){ // 判斷callback是否是函數    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); // 返回兩個處理好的資料  }};

擷取省市縣資料data以及觸發的change事件類型areaType

// 選擇省份時發生事件prov_obj.bind("change",function(){    cityStart();    selectChange('prov'); // 返回資料});// 選擇市級時發生事件city_obj.bind("change",function(){    distStart();    selectChange('city'); // 返回資料});// 選擇區級時發生事件dist_obj.bind("change",function(){    selectChange('dist'); // 返回資料});

在各個事件中執行

前端使用

$("#s_city").citySelect({  prov: "江蘇省",  city: "宿遷市",  dist: "宿城區",  nodata: "none"},function(data, type) {  selectAgent(data.city, data.dist);});

使用回調回來的data資料，用於selectAgent函數中

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擷取相應的代理商資料。

改造外掛程式完成。

更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用外掛程式及用法總結》、《jQuery擴充技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍曆演算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選取器用法總結》

希望本文所述對大家jQuery程式設計有所協助。