jQuery脚本在（document）.ready和$（window）.resize上运行
[英]jQuery script run on (document).ready AND $(window).resize
问题描述
I'm javascript/jQuery clueless! 
我是javascript / jQuery笨手笨脚！
I have a script that is invoked with jQuery(document).ready which works great, I also want the script to update itself when the window is resized. 我有一个用jQuery（document）.ready调用的脚本，该脚本很好用，我还希望脚本在调整窗口大小时自动更新。 The script is called like this: 该脚本的名称如下：
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']; ?>
});
});
I've tried 我试过了
$(window).resize(function() {
accordionMenuSetting();
});
and 和
$(function()
{$(window).resize(AccordionImageMenu).triggerHandler('resize'); });
and 和
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']; ?>
});
});
but all come up with javascript errors. 但都提出了JavaScript错误。 Any ideas guys? 有想法吗？ Thanks in advance! 提前致谢！ :-) :-)
here is the full script 这是完整的脚本
(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 );
1 个解决方案
解决方案1
0 已采纳 2015-10-26 17:49:10
I figured it out. 我想到了。 Instead of adding the $(window).resize(function() { to the calling page I added it into the included JS file. This way I was able to 'see' the trigger and act upon it. To act upon it I created a new function called resize which updated the parameters I needed. Down side: if you manually size the browser window with the mouse it resized the menu 1 pixel at a time which is not perfect and does occasionally fall over. If you simply go from one size to another then it works fine. here is the finished code. I'm sure there is a better way (hint hint) but I've exhausted my own knowledge. 我没有将$（window）.resize（function（）{添加到调用页面中，而是将其添加到了包含的JS文件中。这样，我可以“看到”触发器并对其执行操作。一个叫做resize的新函数更新了我需要的参数缺点：如果您用鼠标手动调整浏览器窗口的大小，它一次会将菜单的大小调整为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 );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
调整窗口大小并准备好文档 - Window resize and document ready
在窗口调整大小上运行jQuery脚本 - Run jQuery script on window resize
jQuery函数在$（window）.resize（）或$（document）.ready（）上执行 - jQuery function executes on $(window).resize() or $(document).ready() not both
jQuery调整大小和文档就绪组合 - jQuery resize and on document ready combination
在以下时间运行函数：window.scroll和window.resize和document.ready - run functions when : window.scroll & window.resize & document.ready
$（window）.resize（）和$（document）.ready（）计算不同的值 - $(window).resize() and $(document).ready() calculate different values
使用jquery最大化文档窗口 - maximize window on document ready with jquery
角运行jQuery $（document）.ready - angular run jquery $(document).ready
如何在jQuery中“在加载时”和“在调整大小时”（在特定的窗口宽度上）运行脚本？ - How to run the script both 'on load' and 'on resize' (on a particular window width!) in jQuery?
jQuery文档准备好与窗口加载冲突了吗？ - jQuery document ready conflicting with window onload?
相关标签