jQuery插件扩展实例【添加回调函数】
本文实例讲述了jQuery插件扩展的方法。分享给大家供大家参考，具体如下：
<scriptlanguage="javascript"type="text/javascript">
functiondoSomething(callback){
//…
//Callthecallback
callback('stuff','goes','here');//给callback赋值，callback是个函数变量
}
functionfoo1(a,b,c){
//I'mthecallback
alert(a+""+b+""+c);
}
doSomething(foo1);//foo1函数将使用callback函数中的数据stuffgoeshere
varfoo2=function(a,b,c){
//I'mthecallback
alert(a+""+b+""+c);
}
doSomething(foo2);//foo2函数将使用callback函数中的数据stuffgoeshere
doSomething(function(a,b,c){
alert(a+""+b+""+c);//function函数将使用callback函数中的数据stuffgoeshere
});
</script>
callback这个参数必须是函数才有效。才能起到回调的作用。
<scriptlanguage="javascript"type="text/javascript">
functiondoSomething(callback){
//…
//Callthecallback
if(typeofcallback==='function'){
callback('stuff','goes','here');//给callback赋值，callback是个函数变量
}else{
alert('jb51.net');
}
}
functionfoo1(a,b,c){
//I'mthecallback
alert(a+""+b+""+c);
}
doSomething(foo1);//foo1函数将使用callback函数中的数据stuffgoeshere
varfoo2=function(a,b,c){
//I'mthecallback
alert(a+""+b+""+c);
}
doSomething(foo2);//foo2函数将使用callback函数中的数据stuffgoeshere
doSomething(function(a,b,c){
alert(a+""+b+""+c);//function函数将使用callback函数中的数据stuffgoeshere
});
varfoo3='a';
doSomething(foo3);
</script>
foo3不是函数的时候，弹出jb51.net
jQuery实例
原函数
$.fn.citySelect=function(settings)
添加回调
$.fn.citySelect=function(settings,changeHandle)//添加回调函数changeHandle
给回调函数赋值
//选项变动赋值事件
varselectChange=function(areaType){
if(typeofchangeHandle==='function'){//判断callback是否是函数
varprov_id=prov_obj.get(0).selectedIndex;
varcity_id=city_obj.get(0).selectedIndex;
vardist_id=dist_obj.get(0).selectedIndex;
if(!settings.required){
prov_id--;
city_id--;
dist_id--;
};
if(dist_id<0){
vardata={
prov:city_json.citylist[prov_id].p,
city:city_json.citylist[prov_id].c[city_id].n,
dist:null
};
}else{
vardata={
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函数中
functionselectAgent(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="<optionvalue=''>-请选择-</option>"
if(json.status==1){
$.each(json.data,function(index,con){
opt_str+="<optionvalue="+con.id+">"+con.name+"电话:"+con.tel+"</option>"
})
}
$('#agent_id').html(opt_str);
}
});
}
去ajax获取相应的代理商数据。
改造插件完成。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。