首页 > 编程 > JavaScript > 正文

jQuery插件扩展实例【添加回调函数】

2019-11-19 18:48:40
字体:
来源:转载
供稿:网友

本文实例讲述了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('VeVB.COm');  }}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不是函数的时候,弹出VeVB.COm

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程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表