jQuery插件的达成

发布时间：2021-12-16 16:29:17 所属栏目：教程来源：互联网

导读：一直在研究jQuery的插件问题，发现了其中一些问题，写在这里供以后记忆，以下是js代码： [html] script type=text/javascript if (jQuery)(function($) { //定义Testl类属性为params var liCount = 0 ; var Test = function(){ this.params = { daley: 5 }

一直在研究jQuery的插件问题，发现了其中一些问题，写在这里供以后记忆，以下是js代码：
[html]
<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) {
                                            selfself.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的插件框架：

[javascript]
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"});
});

就目前个人的应用中感觉够用了，有高手看见请指出不足之处，，谢谢。

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

电脑主机一亮一灭无法	电脑坏了该怎么修复？
分享xp系统硬盘安装版	电脑系统安装软件有什