1

我制作了 jquery 插件，将所需元素的样式设置为时尚的窗口。

我需要在文档就绪时调用插件函数，以便可以对所需元素进行样式化和隐藏，等待触发器显示它们。

问题是，当我第一次调用 ondocument.ready 函数来设置元素样式时，它不会运行多次，这意味着我只能在 document.ready 上设置和隐藏一个元素。我仍然可以通过其他事件触发两次来手动完成。

我认为插件脚本中存在一个问题，不允许同时多次触发该功能！

这是代码，第一次调用将使用插件，第二次不会在文档准备好。任何帮助，将不胜感激！

$(document).ready(function() {  

    $("#addAdmin").flexWin();
    $("#msg").flexWin();

});

和插件脚本：

    (function($){$.fn.extend({ 
    flexWin: function(options) {
        $(window).resize(function() {
            resizer()
        });

        var defaults = {
            background:'#000',
            width: '400px',
            height:'400px',
            defTab: 0,
            closeX: "block", 
            show: 0,
            zindex: 0,
        };

        if (options==null) {                

        }

        var settings = $.extend(defaults, options);

        var n = $("#menu > li").size();         
        var o =settings;
        var objID = $(this).attr('id');
        var obj = $('#'+objID);
        var finalWidth 
        var finalHeight         
        //CSS Adjustments
        if (o.width.indexOf("%") >= 0){
            finalWidth = $(window).width() * (parseFloat(o.width)/100)+"px"
        }
        else{
            finalWidth = o.width
        }               
        if (o.height.indexOf("%") >= 0){
            finalHeight = $(window).width() * (parseFloat(o.width)/100)+"px"
        }
        else{
            finalHeight = o.height
        }

        if (!$('#header',obj).length) {

            obj.css({'width':finalWidth,'height':finalHeight,'overflow': 'hidden', 'border':'solid 2px #0173ff',
            'border-radius': '20px', '-webkit-border-radius': '20px', '-moz-border-radius': '20px'});

            //center window
            obj.css("position","absolute");
            obj.css("top", Math.max(0, (($(window).height() - obj.outerHeight()) / 2) + $(window).scrollTop()) + "px");
            obj.css("left", Math.max(0, (($(window).width() - obj.outerWidth()) / 2) + $(window).scrollLeft()) + "px"); 

            //Transparent background
            copystyle ={
                'background':'#ffffff',
                'opacity':'0.7',
                '-moz-opacity':'0.7',
                'filter':'alpha(opacity=70)',
                'position':'absolute',
                'z-index':'-1',
                'height':'100%',
                'width':'100%',
                'border-radius':'20px', 
                '-webkit-border-radius': '20px', 
                '-moz-border-radius': '20px',
            };
            obj.append('<div id="'+objID+'TransBG"></div><div id="header"></div><div id="close">&#10005</div>');    

            //$('<div id="'+objID+'TransBG"></div>').insertBefore(obj);
            $('#'+objID+'TransBG').css(copystyle);

            //objWB = $('#'+objID+'TransBG') //id of main element With Backgroud                    

            obj.hide();     
            //Transparent background____________

            //Shape objects


            if(n==0){
                var title = obj.attr("title");
                $('#header',obj).append('<div id="title"></div>');
                $('#title',obj).css({'font-size':'20px','color':'#0173ff','text-align':'center','line-height':'30px','width':'100%','height':'34px'});  
                $('#title',obj).text(title);
            }


            $('#header',obj).css({
                'position':'absolute', 'top':'0px','left':'0px','margin':'0px','padding':'0px', 'z-index':-1,
                'width':'100%','height':'35px',
                'border-radius': '15px 15px 0 0',
                '-webkit-border-radius': '15px 15px 0 0',
                '-moz-border-radius':'15px 15px 0 0',

                'background': '#ffffff',
                'background':'-moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 60%, #e1e1e1 84%, #f6f6f6 94%, #0173ff 100%)', 
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(60%,#f1f1f1), color-stop(84%,#e1e1e1), color-stop(94%,#f6f6f6),color-stop(100%,#0173ff))',
                'background': '-o-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',                 
                'background': '-ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',
                'background': 'linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',
                'background-image': '-webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',              
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f6f6f6",GradientType=0 )',                            
            });
            $('#close',obj).click(function(){obj.flexWin()}).css({
                'position':'absolute', 'top':'6px','right':'6px','margin':'0px','padding':'0px',
                'width':'20px','height':'20px','color': '#0173ff','text-align':'center','line-height':'20px','font-size': '14px',   
                'cursor': 'hand','cursor': 'pointer', 'display': o.closeX,              
            });
            if ( o.show==1) {
                obj.show();                 
            }
            else{
                obj.hide();
            }
            if ( $.browser.msie ) {
                $('#header',obj).css({'border-bottom':'solid 2px #1E55B0'});
            }

            //$(obj).delay(300).slideToggle("fast");
        }
        else if ($('#header',obj).length&&options==null) {
             obj.slideToggle("fast");   
        } 
        else if (($('#header',obj).length&&options!=null&&obj.css('display')=='none')) {
             obj.slideToggle("fast");   
             resizer();
        }
        else if ($('#header',obj).length&&options!=null&&obj.css('display')!='none') {
             resizer();
        } 
        //______________________

        if (obj.length > 0) {

        }

        //window style to class objects
        $('.styleIT',obj).css({
                'border-radius': '15px 15px 0 0',
                '-webkit-border-radius': '15px 15px 0 0',
                '-moz-border-radius':'15px 15px 0 0',

                'background': '#ffffff',
                'background':'-moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 60%, #e1e1e1 84%, #f6f6f6 94%, #0173ff 100%)', 
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(60%,#f1f1f1), color-stop(84%,#e1e1e1), color-stop(94%,#f6f6f6),color-stop(100%,#0173ff))',
                'background': '-o-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',                 
                'background': '-ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',
                'background': 'linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',
                'background-image': '-webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 60%,#e1e1e1 84%,#f6f6f6 94%, #0173ff 100%)',              
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f6f6f6",GradientType=0 )',                            
        });

        //Control window size and position on browser window resize
        function resizer() {
            if (o.width.indexOf("%") >= 0){
                finalWidth = $(window).width() * (parseFloat(o.width)/100)+"px"
            }
            else{
                finalWidth = o.width                    
            }
            if (o.height.indexOf("%") >= 0){
                finalHeight = $(window).height() * (parseFloat(o.height)/100)+"px"
            }
            else{
                finalHeight = o.height
            }   
            obj.stop().animate({
                'left':Math.max(0, (($(window).width() - parseFloat(finalWidth)) / 2) + $(window).scrollLeft()) +'px',
                'top':Math.max(0, (($(window).height() - parseFloat(finalHeight)) / 2) + $(window).scrollTop()) +'px',
                'width':finalWidth,
                'height':finalHeight,
            }, "fast");
            objWB.stop().animate({
                'left':Math.max(0, (($(window).width() - parseFloat(finalWidth)) / 2) + $(window).scrollLeft()) +'px',
                'top':Math.max(0, (($(window).height() - parseFloat(finalHeight)) / 2) + $(window).scrollTop()) +'px',
                'width':finalWidth,
                'height':finalHeight,
            }, "fast");
            tabSpace = parseFloat(finalWidth)-35;
            tabWidth = tabSpace/tabCount
            $("li>h1", obj).css({'width':tabWidth+'px'});
            $("span").text(tabWidth); 
            return false;
        };                  


        var tabSpace = parseFloat(finalWidth)-35;
        var tabCount = $("li", obj).length;
        var tabWidth = tabSpace/tabCount



        return this.each(function() {

            var items = $("li>h1", obj);  
            $("li>h1", obj).css({
                'font-size':'11px', 'z-index':10, 'color':'#2D2D2D','margin':'0px','padding':'0px','text-align':'center','line-height':'30px','overflow':'hidden',
                'width':tabWidth+'px','height':'34px','float':'left',
                'border-radius': '15px 15px 0 0','border-right':'solid 1px #2D2D2D',
                '-webkit-border-radius': '15px 15px 0 0',
                '-moz-border-radius':'15px 15px 0 0',


                'background': '#232020',
                'background':'-moz-linear-gradient(top,  #232020 0%, #000000 68%, #262626 94%, #333333 100%)',  
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#232020), color-stop(68%,#000000), color-stop(94%,#262626), color-stop(100%,#333333))',
                'background': '-o-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',                  
                'background': '-ms-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',
                'background': 'linear-gradient(to bottom,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',
                'background-image': '-webkit-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',               
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#45484d", endColorstr="#000000",GradientType=0 )',    
            });  
            //$("li:not(:eq(2))>h1",this).css("color","red");  
            items.mouseover(function() {
                //$("span").text($(this).parent().index());
                if($(this).parent().index()!=o.defTab){
                    $(this).css({
                        'color':'#fff','border-right':'solid 1px #fff','border-bottom':'solid 1px #fff',
                    })
                }                   
            }).mouseout(function() {
                $("span").text("0"); 
                if($(this).parent().index()!=o.defTab){ 
                    $(this).css({
                        'color':'#2D2D2D','border-right':'solid 1px #2D2D2D','border-bottom':'none',
                    }) 
                }
            }).click(function() {
                o.defTab = $(this).parent().index()
                $("li:eq("+o.defTab+")>h1",obj).css({
                    'color':'#0173ff','border-right':'solid 1px #0173ff','border-left':'solid 1px #0173ff','border-bottom':'none',
                    'background': '#232020',
                    'background':'-moz-linear-gradient(top,  #232020 0%, #000000 68%, #262626 94%, #0173ff 100%)',  
                    'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#232020), color-stop(68%,#000000), color-stop(94%,#262626), color-stop(100%,#0173ff))',
                    'background': '-o-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',                  
                    'background': '-ms-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',
                    'background': 'linear-gradient(to bottom,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',
                    'background-image': '-webkit-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',               
                    'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#45484d", endColorstr="#000000",GradientType=0 )',
                });
                $("li:not(:eq("+o.defTab+"))>h1",obj).css({
                    'color':'#2D2D2D','border-right':'solid 1px #2D2D2D','border-left':'solid 1px #2D2D2D',
                    'background': '#232020',
                    'background':'-moz-linear-gradient(top,  #232020 0%, #000000 68%, #262626 94%, #333333 100%)',  
                    'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#232020), color-stop(68%,#000000), color-stop(94%,#262626), color-stop(100%,#333333))',
                    'background': '-o-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',                  
                    'background': '-ms-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',
                    'background': 'linear-gradient(to bottom,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',
                    'background-image': '-webkit-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#333333 100%)',               
                    'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#45484d", endColorstr="#000000",GradientType=0 )',    
                });                      
            });
            $("li:eq("+o.defTab+")>h1",obj).css({
                'color':'#0173ff','border-right':'solid 1px #0173ff','border-left':'solid 1px #0173ff',
                'background': '#232020',
                'background':'-moz-linear-gradient(top,  #232020 0%, #000000 68%, #262626 94%, #0173ff 100%)',  
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#232020), color-stop(68%,#000000), color-stop(94%,#262626), color-stop(100%,#0173ff))',
                'background': '-o-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',                  
                'background': '-ms-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',
                'background': 'linear-gradient(to bottom,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',
                'background-image': '-webkit-linear-gradient(top,  #232020 0%,#000000 68%,#262626 94%,#0173ff 100%)',               
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr="#45484d", endColorstr="#000000",GradientType=0 )',
            });  
        });
    }
});
})(jQuery);
4

1 回答 1

1

那里有很多代码，但我认为您在这里遗漏了一个关键点。您的插件不必能够应用于多个元素，例如 

$("#addAdmin,#msg").flexWin();

这可能是因为您没有为此类插件遵循正确的 jQuery 插件模式。您需要在插件内有一个类/函数来完成插件的所有繁重工作，并且可以在插件内的参数元素上调用，如下所示 

/* ... some plugin code .. */
this.each(function(){ /*the heavy work here */})
/* ... some plugin code .. */

在这种情况下this，应用插件的元素列表在哪里。"#addAdmin,#msg"我发现这个 jquery 插件样板对您的情况很有帮助。

我希望它有所帮助。

更新

向插件内的答案正文添加有用的注释
var n = $("#menu > li").size()会创建对页面标记结构的依赖。这将影响插件的插件行为IMO

于 2013-04-23T13:27:41.253 回答