Сценарий jQuery, запущенный (документ).ready AND $(окно).resize
Я не умею javascript/jQuery!
У меня есть скрипт, который вызывается с помощью jQuery(document). Уже отлично работает, я также хочу, чтобы скрипт сам обновлялся при изменении размера окна. Сценарий называется так:
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 );
1 ответ
Решение
Я понял. Вместо добавления $(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 );