jquery插件编写【基本格式】
jquery插件基本格式:
/** * @authors shimily (shimilywell@126.com) * @date 2015-03-05 15:30:51 * @version */ ;(function($){ /** *tab切换 */ $.fn.demo=function(options){ var defaults={ //各种属性:属性值 } var lists=$.extend(defaults,options); this.each(function(){ //各种执行语句 }); return this; //方便链式操作 }; /** *提交数据 */ })(jQuery);
插件执行方法:
$(document).demo({ data:{name:"shimily",age:"24",s_class:"09级网络技术一班"}, eventType:"click" }); $(document).ajaxFn();
比较全的插件编写例子:
;(function($){ /** * 居中对齐的div */ $.fn.demo=function(options){ var defaults={ btn:$(".btn"), obj:$(".box"), data:{name:"Tom",age:"22",s_class:"三年级一班"}, eventType:"mouseover", addClass:"border" } var options=$.extend(defaults,options); this.each(function(){ options.obj.css({ "top":($(window).height()-options.obj.height())/2, "left":($(window).width()-options.obj.height())/2, "position":"absolute" }); options.btn.bind(options.eventType,function(){ $(".line").toggleClass(options.addClass); $(".line").html("姓名:"+options.data.name+"<br>年龄:"+options.data.age+"<br>班级:"+options.data.s_class); }); }); return this; }; /** *ajax获取data数据 */ $.fn.ajaxFn=function(list){ var defaults={ btn:$(".link"), obj:$(".content"), addClass:"blue", eventType:"click" }; var lists=$.extend(defaults,list); this.each(function(){ lists.btn.bind(lists.eventType,function(){ $.ajax({ type: "POST", url: "data/1.html", //data: "name=John&location=Boston", dataType:"json", success: function(msg){ var data=msg.data, str = ''; for(var i = 0; i < data.length; i++){ str +='<li>'+'姓名:'+data[i].name+' 年龄:'+data[i].age+'班级:'+data[i].banji+'</li>'; } lists.obj.html('<ul>'+str+'</ul>'); } }); }); }); return this; }; })(jQuery);
给心灵一个纯净空间,让思想,情感,飞扬!