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 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
node.js中express-session配置项详解
May 31 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue 打包体积优化方案小结
May 20 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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python文件的md5加密方法
2016/04/06 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
优秀大学生申请书
2019/06/24 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android