jQuery插件的实现

openkk 7年前

这两天一直在研究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"});  &nbsp;});  &nbsp;
转自:http://blog.csdn.net/tanguooo19866/article/details/7255992