Welcome

首页 / 脚本样式 / JavaScript / jQuery插件扩展实例【添加回调函数】

本文实例讲述了jQuery插件扩展的方法。分享给大家供大家参考,具体如下:
<script language="javascript" type="text/javascript">function doSomething(callback) {// … // Call the callbackcallback("stuff", "goes", "here"); // 给callback赋值,callback是个函数变量}function foo1(a, b, c) {// I"m the callbackalert(a + " " + b + " " + c);}doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes herevar foo2 = function(a,b,c) {// I"m the callbackalert(a + " " + b + " " + c);}doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes heredoSomething(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 callbackif(typeof callback === "function"){callback("stuff", "goes", "here"); // 给callback赋值,callback是个函数变量}else{alert("jb51.net");}}function foo1(a, b, c) {// I"m the callbackalert(a + " " + b + " " + c);}doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes herevar foo2 = function(a,b,c) {// I"m the callbackalert(a + " " + b + " " + c);}doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes heredoSomething(function(a,b,c){alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here});var foo3 = "a";doSomething(foo3);</script>
foo3不是函数的时候,弹出jb51.net
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相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。