我javascript / jQuery一无所知！
我有一个用jQuery（document）.ready调用的脚本，效果很好，我也希望脚本在调整窗口大小时自行更新。该脚本的调用方式如下：
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 );
答案 0 :(得分：0)
我明白了。而不是将$（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 );