jQuery插件的實現

openkk 13年前發布 | 19K 次閱讀 jQuery jQuery插件

這兩天一直在研究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></pre>

此方法實現了圖片的淡出效果;總結了一個自己的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;</pre>轉自:http://blog.csdn.net/tanguooo19866/article/details/7255992

 本文由用戶 openkk 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!