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 进度条 实现代码
Jul 30 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
vue中appear的用法
Aug 17 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
php实现jQuery扩展函数
2009/10/30 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
Python的一些用法分享
2012/10/07 Python
python的常见命令注入威胁
2013/02/18 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python实现视频下载功能
2017/03/14 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python xlsxwriter模块的使用
2020/12/24 Python
小学老师寄语大全
2014/04/04 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
团组织关系介绍信
2019/06/24 职场文书