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 学习笔记一
Apr 07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 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
文件上传程序的全部源码
2006/10/09 PHP
PHP中的类型约束介绍
2015/05/11 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python可以用哪些数据库
2020/06/22 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
店长岗位职责
2013/11/21 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
早会主持词
2014/03/17 职场文书
品牌服务方案
2014/06/03 职场文书
义和团口号
2014/06/17 职场文书
代理人委托书
2014/09/16 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
运动会跳远广播稿
2015/08/19 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL