jQuery插件的实现
openkk
13年前
这两天一直在研究jQuery的插件问题,发现了其中一些问题 ,写在这里供以后记忆,以下是js代码:
<script type="text/javascript"> if (jQuery)(function($) { //定义Testl类 属性为params var liCount = 0 ; var Test = function(){ this.params = { "daley": 5 }; this.index = 0; this.enable = true; }; //定义方法为create 参数是src(jQuery对象 指向div) data是对象传进来的{daley:3} Test.prototype = { create : function(src,data){ var self = this; self.src = src; //将Test的属性和传入的data融合返回对象(data将覆盖this.params) self.params = $.extend({}, self.params,data); //添加业务逻辑 src.addClass("moive"); var w = src.width(); var h = src.height(); var liArray = src.find("li"); liCount = liArray.size(); if (liCount > 1) { var str = '<div style="position:absolute; left:' + (w - 10 - liCount * 20) + 'px; top:' + (h - 25) + 'px;">'; for (var i = 1; i <= liCount; i++) { str += '<span class="txt">' + i + '</span>'; } str += '</div>'; src.append(str); src.find("li:gt(0)").hide();//大于0的li元素隐藏 src.find("span:first").addClass("selected"); var spanArray = src.find("span"); spanArray.bind("click", function() { self.index = $(this).text() - 1; if (self.index >= self.count) return; spanArray.removeClass("selected"); $(this).addClass('selected'); liArray.hide().eq(self.index).fadeIn("slow"); //实现图片淡出 也可以自定义其他图片显示效果 }); self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000); src.hover(function() { self.enable = false; clearTimeout(self.t); }, function(){ self.enable = true; clearTimeout(self.t); self.t = setTimeout(function() { self.showAuto(); },self.params.daley * 1000); }); } }, showAuto: function() { var self = this; if (self.enable) { self.index = self.index >= (liCount - 1) ? 0 : self.index + 1; self.src.find("span").eq(self.index).trigger('click'); clearTimeout(self.t); self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000); } } //业务逻辑结束 }; $.fn.extend({"xdMoive":function(method){ var create1 = function(src, data){ if(src.tagName.toLowerCase()!='div') return; src1=$(src); //将DOM对象转换为jQuery对象 if(src1.data("xdMoive")!=undefined) return; var test = new Test(); test.create(src1,data); src1.data("xdMoive",test); } switch(method) { default: $(this).each(function(){ //alert(this.tagName.toLowerCase()); create1(this,method);//此时this是DOM对象 指向div }); break; } //alert($(this).attr("class")); return $(this);//此时$(this)是jQuery对象 指向div } }); })(jQuery); //调用闭包方法 $(function(){ $(".div").xdMoive({daley:2}); }); </script>
此方法实现了图片的淡出效果;总结了一个自己的jQuery的插件框架,自己日常用足够。在此希望高手指出不足之处,小弟谢过。。。
以下是个人总结的jQuery的插件框架:if(jQuery)(function($){ var Ctl=function(){ this.params={width:"100px", height:"10px", text:"test"} } Ctl.prototype={ create:function(src, data) { var self = this; self.src = src; self.params = $.extend({}, self.params,data); //业务逻辑的实现 src.width(self.params.width); src.height(self.params.height); src.val(self.params.text); } }; $.fn.extend({"xdText":function(method){ var create1 = function(src, data){ if(src.tagName.toLowerCase()!='textarea') return; src1=$(src); if(src1.data("xdText")!=undefined) return; var ctl=new Ctl(); ctl.create(src1,data); src1.data("xdText",ctl); } switch(method) { default://默认情况下执行 $(this).each(function(){ //$(this)指向的是xdTest本身<pre name="code" class="javascript"> create1(this,method);//将调用此方法的DOM对象传入(这里的this指向的是textarea),method指向的是{text:"..", //height:"100px"}<pre name="code" class="javascript"><pre name="code" class="javascript"> }); break; } //alert($(this).height()+'qqq222'); return $(this);//返回调用时候传入的DOM对象 } }); })(jQuery) $(function(){//调用此插件的对象 $("textarea").xdText({text:"hello world",height: "100px"}); }); 转自:http://blog.csdn.net/tanguooo19866/article/details/7255992