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

 更新时间:2016年11月26日 14:42:48   作者:牛逼的霍啸林  
这篇文章主要介绍了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 here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(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 here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(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程序设计有所帮助。

相关文章

  • jQuery多个input求和的实现方法

    jQuery多个input求和的实现方法

    这篇文章主要介绍了jQuery多个input求和的实现方法,涉及jQuery获取input表单元素值及运算的相关技巧,需要的朋友可以参考下
    2015-02-02
  • jquery简单倒计时实现方法

    jquery简单倒计时实现方法

    这篇文章主要介绍了jquery简单倒计时实现方法,涉及jQuery定时函数操作及日期与实现的运算技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery 操作input中radio的技巧

    jQuery 操作input中radio的技巧

    这篇文章主要介绍了jQuery 操作input中radio的技巧的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
    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计时器简单应用说明

    jQuery timers计时器简单应用说明

    大家都知道jQuery很强大,也有很多效果很帅的插件,下面介绍下jQuery定时器插件jQuery Timers,那JS都自带有定时器,为什么要使用Jquery的呢?
    2010-10-10
  • jQuery图片拖动组件Dropzone用法示例

    jQuery图片拖动组件Dropzone用法示例

    这篇文章主要介绍了jQuery图片拖动组件Dropzone用法,结合实例形式分析了图片拖动组件Dropzone的功能、安装及具体使用方法,需要的朋友可以参考下
    2017-01-01
  • jQuery简单实现提交数据出现loading进度条的方法

    jQuery简单实现提交数据出现loading进度条的方法

    这篇文章主要介绍了jQuery简单实现提交数据出现loading进度条的方法,涉及jQuery的ajax调用及页面样式操作技巧,需要的朋友可以参考下
    2016-03-03
  • jQuery 文本框模拟下拉列表效果

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

    学校作业的问题,就在网搜了一下,找不到文本框模拟的(可能本人RP问题),看到的都是用div的,结果就自己弄了一个,主要就是改变背景图片的位置,让div的位置放到文本框上面,没什么其它的东西,呵呵,见笑了
    2010-02-02
  • jQuery checkbox全选/取消全选实现代码

    jQuery checkbox全选/取消全选实现代码

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法。但使用jQuery实现则更简单,代码也很简洁,精辟!
    2009-11-11

最新评论