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


Posted in Javascript onNovember 26, 2016

本文实例讲述了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('3water.com');
  }
}
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不是函数的时候,弹出3water.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程序设计有所帮助。

Javascript 相关文章推荐
理解Javascript_12_执行模型浅析
Oct 18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 #Javascript
JS自定义混合Mixin函数示例
Nov 26 #Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 #Javascript
JS匿名函数类生成方式实例分析
Nov 26 #Javascript
正则表达式替换html元素属性的方法
Nov 26 #Javascript
js初始化验证实例详解
Nov 26 #Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 #Javascript
You might like
解析MySql与Java的时间类型
2013/06/22 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP 微信支付类 demo
2015/11/30 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
vue的for循环使用方法
2019/02/12 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
超实用的 30 段 Python 案例
2019/10/10 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
成教自我鉴定
2013/10/27 职场文书
社区中秋节活动方案
2014/01/29 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
农村门前三包责任书
2014/07/25 职场文书
标准单位租车协议书
2014/09/23 职场文书
英文自荐信范文
2015/03/25 职场文书
公司开会通知
2015/04/20 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
工资证明格式模板
2015/06/12 职场文书
城南旧事读书笔记
2015/06/29 职场文书
交通安全主题班会
2015/08/12 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书