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('fuck you');
    }
}

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不是函数的时候,弹出fuck you

 

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获取相应的代理商数据。

 

改造插件完成。



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5002419.html,如需转载请自行联系原作者

相关文章
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 前端开发 UED
|
JavaScript 前端开发
jquery插件制作教程 txtHover(转载)
http://www.jb51.net/article/31082.htm 该系列文章是我阅读
761 0
|
Web App开发 JavaScript 前端开发
精心挑选:10款实用的 jQuery Tab 切换插件和教程
  Tab 标签页也称为选项卡或者切换,是网站的常用功能,适合用于一组内容之间的切换显示。使用流行的 jQuery 库实现选项卡切换功能非常简单,虽然风格多种多样,但实现思路其实都是一样的。今天这篇文章精心挑选了10款非常实用的 jQuery Tab 切换插件推荐给大家,这些优秀的 jQuery 插件能够帮助你改进网站中的选项卡功能的用户体验。
1545 0
|
JavaScript 前端开发
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
879 0
|
JavaScript 前端开发 C#
推荐40款强大的 jQuery 导航插件和教程【上篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
980 0
|
JavaScript 前端开发
精心挑选的12款优秀 jQuery 手风琴效果插件和教程
  当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球。
1233 0
|
JavaScript 前端开发 UED
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1145 0