欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件擴展實例【添加回調(diào)函數(shù)】

 更新時間:2016年11月26日 14:42:48   作者:牛逼的霍嘯林  
這篇文章主要介紹了jQuery插件擴展的方法,結(jié)合實例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機制的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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è)計有所幫助。

相關(guān)文章

  • jQuery多個input求和的實現(xiàn)方法

    jQuery多個input求和的實現(xiàn)方法

    這篇文章主要介紹了jQuery多個input求和的實現(xiàn)方法,涉及jQuery獲取input表單元素值及運算的相關(guān)技巧,需要的朋友可以參考下
    2015-02-02
  • jquery簡單倒計時實現(xiàn)方法

    jquery簡單倒計時實現(xiàn)方法

    這篇文章主要介紹了jquery簡單倒計時實現(xiàn)方法,涉及jQuery定時函數(shù)操作及日期與實現(xiàn)的運算技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-12-12
  • jQuery 操作input中radio的技巧

    jQuery 操作input中radio的技巧

    這篇文章主要介紹了jQuery 操作input中radio的技巧的相關(guān)資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起看下吧
    2016-07-07
  • jQuery中index()方法用法實例

    jQuery中index()方法用法實例

    這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • jQuery EasyUI API 中文文檔 - EasyLoader 加載器

    jQuery EasyUI API 中文文檔 - EasyLoader 加載器

    jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。
    2011-09-09
  • jQuery timers計時器簡單應(yīng)用說明

    jQuery timers計時器簡單應(yīng)用說明

    大家都知道jQuery很強大,也有很多效果很帥的插件,下面介紹下jQuery定時器插件jQuery Timers,那JS都自帶有定時器,為什么要使用Jquery的呢?
    2010-10-10
  • jQuery圖片拖動組件Dropzone用法示例

    jQuery圖片拖動組件Dropzone用法示例

    這篇文章主要介紹了jQuery圖片拖動組件Dropzone用法,結(jié)合實例形式分析了圖片拖動組件Dropzone的功能、安裝及具體使用方法,需要的朋友可以參考下
    2017-01-01
  • jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法

    jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法

    這篇文章主要介紹了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法,涉及jQuery的ajax調(diào)用及頁面樣式操作技巧,需要的朋友可以參考下
    2016-03-03
  • jQuery 文本框模擬下拉列表效果

    jQuery 文本框模擬下拉列表效果

    學校作業(yè)的問題,就在網(wǎng)搜了一下,找不到文本框模擬的(可能本人RP問題),看到的都是用div的,結(jié)果就自己弄了一個,主要就是改變背景圖片的位置,讓div的位置放到文本框上面,沒什么其它的東西,呵呵,見笑了
    2010-02-02
  • jQuery checkbox全選/取消全選實現(xiàn)代碼

    jQuery checkbox全選/取消全選實現(xiàn)代碼

    用JavaScript使頁面上的一組checkbox全選/取消全選,邏輯很簡單,實現(xiàn)代碼也沒有太難的語法。但使用jQuery實現(xiàn)則更簡單,代碼也很簡潔,精辟!
    2009-11-11

最新評論