jQuery 脚本运行 on (document).ready AND $(window).resize

Question

我javascript/jQuery一窍不通！

我有一个用 jQuery(document).ready 调用的脚本，效果很好，我还希望脚本在 window 调整大小时自动更新。脚本是这样调用的：

jQuery(document).ready(function($) {

    $('#accordion').AccordionImageMenu({
      'openPc': <?PHP echo $params['openPc']; ?>,
      'width':<?PHP echo $params['width']; ?>, 
      'height':<?PHP echo $params['height']; ?>, 
      'effect': '<?PHP echo $params['effect']; ?>',
      'duration': <?PHP echo $params['duration']; ?>,
      'openItem': <?PHP echo ($params['keepMenuItemOpen'] ==1)? $openItem : "null"; ?>,
      'border' : <?PHP echo $params['border']; ?>,
      'color' : '<?PHP echo $params['color']; ?>',
      'position' : '<?PHP echo $params['position']; ?>',
      'fadeInTitle': <?PHP echo $params['fadeInTitle']; ?>
    }); 
});

我试过了

$(window).resize(function() {
accordionMenuSetting();
});

和

$(function() 
{$(window).resize(AccordionImageMenu).triggerHandler('resize'); });

和

    jQuery(window).on('resize', function($){
    $('#accordion').AccordionImageMenu({
      'openPc': <?PHP echo $params['openPc']; ?>,
      'width':<?PHP echo $params['width']; ?>, 
      'height':<?PHP echo $params['height']; ?>, 
      'effect': '<?PHP echo $params['effect']; ?>',
      'duration': <?PHP echo $params['duration']; ?>,
      'openItem': <?PHP echo ($params['keepMenuItemOpen'] ==1)? $openItem : "null"; ?>,
      'border' : <?PHP echo $params['border']; ?>,
      'color' : '<?PHP echo $params['color']; ?>',
      'position' : '<?PHP echo $params['position']; ?>',
      'fadeInTitle': <?PHP echo $params['fadeInTitle']; ?>
    }); 

});

但都出现 javascript 错误。有什么想法吗？提前致谢！ :-)

这是完整的脚本

(function( $ ){

    function accordionMenuSetting(obj,settings) {       

            this.menuSettings = settings;
            this.menuAnimate = animate;         
            var _this = this;

            function animate(obj,i){                

                $.each(obj, function(j) {
                    var menuWidth = $('#accordion').width();
                    //claculate initial openDim based on percentage of menuWidth
                    var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
                    //calculate closedDim using initial openDim
                    var closedDim = Math.floor(  (  menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1)  );
                    //recalculate openDim based on closedDim.  this ensures that we use the full width and are pixel perfect (-1 just to make sure)
                    var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
                    var neutralDim = Math.floor( (menuWidth- (_this.menuSettings.border*(obj.length-1)))/obj.length);
                    var remainder = menuWidth-(_this.menuSettings.border*(obj.length-1))- (neutralDim*obj.length);
                    var itemDim = closedDim;
                    if ( j == i ) {
                        itemDim = openDim;
                    }
                    if (typeof i == 'undefined') {
                        if (_this.menuSettings.openItem == null) { //keep active not set
                            if (j == (obj.length - 1)){ //if item is the last add the remainder to fill the space
                                itemDim = neutralDim + remainder;
                            }else{ //otherwise just use the neutral dimension
                                itemDim = neutralDim;
                            }
                        }
                        else if (_this.menuSettings.openItem == j) itemDim = openDim;
                        else itemDim = closedDim;
                    }

                    if (_this.menuSettings.position == 'vertical')
                        $(this).animate({'height':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
                    else 
                        $(this).animate({'width':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);

                    var title = $('span',this);

                    title.stop(true,false);
                    if (_this.menuSettings.fadeInTitle >0 && title.length > 0) {
                        if (itemDim == openDim) {
                            if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0.7});
                            else title.animate({'opacity':0});      
                        } else {
                            if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0});
                            else title.animate({'opacity':0.7});
                        }
                    } else {
                        title.css("display", "none"); 
                    }

                });     

            }

            var $this = $('a',obj);
            var defaultViewPort = 940;
            var menuWidth = $('#accordion').width();
            var menuScale = menuWidth / defaultViewPort;
            var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
            //calculate closedDim using initial openDim
            var closedDim = Math.floor(  (  menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1)  );
            //recalculate openDim based on closedDim.  this ensures that we use the full width and are pixel perfect (-1 just to make sure)
            var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;

            _this.menuAnimate($this);

            var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;

            if (_this.menuSettings.position == 'vertical') 
                $(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
            else 
                $(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});       


            $.each($this, function(i) { 

                ImgSrc = $('img',this).attr('src');
                $('img',this).hide();

                var borderBottomValue = 0;
                var borderRightValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
                var aWidth = 'auto';            
                var aHeight = _this.menuSettings.height * menuScale+'px';
                if (_this.menuSettings.position == 'vertical') {

                    borderBottomValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
                    borderRightValue = 0;
                    aWidth = _this.menuSettings.width+'px';             
                    aHeight = 'auto';               
                }   


                if ( i == ($this.length-1)) {
                    borderBottomValue = 0;
                    borderRightValue = 0;
                } 

                $(this).css({
                            'width': aWidth,
                            'height': aHeight,
                            'background-image':'url('+ImgSrc+')',
                            'background-size':'cover',
                            'background-color':_this.menuSettings.color,
                            'background-repeat':'no-repeat',
                            'border-bottom': borderBottomValue,
                            'border-right': borderRightValue                        
                            }).mouseenter(function() {
                                $this.stop(true,false);
                                _this.menuAnimate($this,i);
                            }); 

            });

            $(obj).mouseleave(function() {
                _this.menuAnimate($this);
            });


    }

    $.fn.AccordionImageMenu = function( options ) { 

        var settings = {
                        'openPc': 44,
                        'width':200,
                        'height':200,
                        'effect': 'swing',
                        'duration': 400,
                        'openItem': null,
                        'border': 2,
                        'color':'#000000', 
                        'position':'horizontal',
                        'fadeInTitle': true
                        };

        return this.each(function() {           
            $(this).addClass("aim");
            $('br',this).remove();
            if ( options ) $.extend( settings, options );
            var menu = new accordionMenuSetting(this,settings);
        });
    };

})( jQuery );

Answer 1

我明白了。我没有将 $(window).resize(function() { 添加到调用页面，而是将其添加到包含的 JS 文件中。这样我就能够 'see' 触发器并对其进行操作。为了对此采取行动，我创建了一个名为 resize 的新函数，它更新了我需要的参数。缺点：如果您使用鼠标手动调整浏览器 window 的大小，它会一次将菜单调整 1 个像素，这并不完美并且确实偶尔会摔倒。如果你只是从一种尺寸换到另一种尺寸，那么它就可以正常工作。这是完成的代码。我相信有更好的方法（提示提示），但我已经用尽了自己的知识。

    (function( $ ){

    function accordionMenuSetting(obj,settings) {       
            this.menuSettings = settings;
            this.menuAnimate = animate;         
            this.menuResize = resize;           
            var _this = this;

            function animate(obj,i){                

                $.each(obj, function(j) {
                    var menuWidth = $('#accordion-box').width();
                    //console.log ("width = "+$('#accordion-box').width());
                    //claculate initial openDim based on percentage of menuWidth
                    var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
                    //calculate closedDim using initial openDim
                    var closedDim = Math.floor(  (  menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1)  );
                    //recalculate openDim based on closedDim.  this ensures that we use the full width and are pixel perfect (-1 just to make sure)
                    var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
                    var neutralDim = Math.floor( (menuWidth- (_this.menuSettings.border*(obj.length-1)))/obj.length);
                    var remainder = menuWidth-(_this.menuSettings.border*(obj.length-1))- (neutralDim*obj.length);
                    var itemDim = closedDim;
                    if ( j == i ) {
                        itemDim = openDim;
                    }
                    if (typeof i == 'undefined') {
                        if (_this.menuSettings.openItem == null) { //keep active not set
                            if (j == (obj.length - 1)){ //if item is the last add the remainder to fill the space
                                itemDim = neutralDim + remainder;
                            }else{ //otherwise just use the neutral dimension
                                itemDim = neutralDim;
                            }
                        }
                        else if (_this.menuSettings.openItem == j) itemDim = openDim;
                        else itemDim = closedDim;
                    }

                    if (_this.menuSettings.position == 'vertical')
                        $(this).animate({'height':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
                    else 
                        $(this).animate({'width':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);

                    var title = $('span',this);

                    title.stop(true,false);
                    if (_this.menuSettings.fadeInTitle >0 && title.length > 0) {
                        if (itemDim == openDim) {
                            if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0.7});
                            else title.animate({'opacity':0});      
                        } else {
                            if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0});
                            else title.animate({'opacity':0.7});
                        }
                    } else {
                        title.css("display", "none"); 
                    }

                });     

            }
            function resize(obj,i){
                var defaultViewPort = 940;
                var menuWidth = $('#accordion-box').width();
                var menuScale = menuWidth / defaultViewPort;
                console.log ("menuscale=" + menuScale);
                var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
                //calculate closedDim using initial openDim
                var closedDim = Math.floor(  (  menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1)  );
                //recalculate openDim based on closedDim.  this ensures that we use the full width and are pixel perfect (-1 just to make sure)
                var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;

                _this.menuAnimate($this);

                var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;

                if (_this.menuSettings.position == 'vertical') 
                    $(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
                else 
                    $(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});       


                $.each($this, function(i) { 
                    var aWidth = 'auto';            
                    var aHeight = _this.menuSettings.height * menuScale+'px';
                    if (_this.menuSettings.position == 'vertical') {

                        aWidth = _this.menuSettings.width+'px';             
                        aHeight = 'auto';               
                    }   
                    $(this).css({
                        'width': aWidth,
                        'height': aHeight
                    }); 

                })
            };

            var $this = $('a',obj);
            var defaultViewPort = 940;
            var menuWidth = $('#accordion-box').width();
            var menuScale = menuWidth / defaultViewPort;
            console.log ("menuscale=" + menuScale);
            var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
            //calculate closedDim using initial openDim
            var closedDim = Math.floor(  (  menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1)  );
            //recalculate openDim based on closedDim.  this ensures that we use the full width and are pixel perfect (-1 just to make sure)
            var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;

            _this.menuAnimate($this);

            var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;

            if (_this.menuSettings.position == 'vertical') 
                $(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
            else 
                $(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});       


            $.each($this, function(i) { 

                ImgSrc = $('img',this).attr('src');
                $('img',this).hide();

                var borderBottomValue = 0;
                var borderRightValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
                var aWidth = 'auto';            
                var aHeight = _this.menuSettings.height * menuScale+'px';
                if (_this.menuSettings.position == 'vertical') {

                    borderBottomValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
                    borderRightValue = 0;
                    aWidth = _this.menuSettings.width+'px';             
                    aHeight = 'auto';               
                }   


                if ( i == ($this.length-1)) {
                    borderBottomValue = 0;
                    borderRightValue = 0;
                } 

                $(this).css({
                            'width': aWidth,
                            'height': aHeight,
                            'background-image':'url('+ImgSrc+')',
                            'background-size':'cover',
                            'background-color':_this.menuSettings.color,
                            'background-repeat':'no-repeat',
                            'border-bottom': borderBottomValue,
                            'border-right': borderRightValue                        
                            }).mouseenter(function() {
                                $this.stop(true,false);
                                _this.menuAnimate($this,i);
                            }); 

            });

                $(window).resize(function() {
                    _this.menuResize(obj);
                });


            $(obj).mouseleave(function() {
                _this.menuAnimate($this);
            });

    }

    $.fn.AccordionImageMenu = function( options ) { 

        var settings = {
                        'openPc': 44,
                        'width':200,
                        'height':200,
                        'effect': 'swing',
                        'duration': 400,
                        'openItem': null,
                        'border': 2,
                        'color':'#000000', 
                        'position':'horizontal',
                        'fadeInTitle': true
                        };

        return this.each(function() {           
            $(this).addClass("aim");
            $('br',this).remove();
            if ( options ) $.extend( settings, options );
            var menu = new accordionMenuSetting(this,settings);
        });
    };

})( jQuery );

jQuery 脚本运行 on (document).ready AND $(window).resize

jQuery script run on (document).ready AND $(window).resize

javascript

jquery

resize

ready

jQuery 脚本 运行 on (document).ready AND $(window).resize

jQuery script run on (document).ready AND $(window).resize

javascript

jquery

resize

ready

jQuery 脚本运行 on (document).ready AND $(window).resize