Почему MooTools удаляет поля при создании экземпляра Fx.Slide?
Вопрос
у меня есть <div>
с правилом CSS margin: 0 auto;
и я использую MooTools, чтобы сдвинуть его, когда это необходимо.
Кажется, что простая реализация Fx.Slide
объект удаляет поле моего элемента.То есть, если раньше элемент располагался по центру внутри своего родителя, то теперь он выровнен по левому краю.Кажется, только эта строка делает это:
var slide = new Fx.Slide('mydiv');
Я могу противодействовать этому эффекту, сделав что-то вроде этого:
var slide = new Fx.Slide('mydiv');
$('mydiv').setStyle('margin', '0 auto');
Но это грубо, и я, конечно, не хочу делать это каждый раз, когда сталкиваюсь с такой ситуацией.И тем более, я хочу знать, почему MooTools вообще удаляет поля?Есть ли опция, о которой я не знаю, какой-то параметр, которым я пренебрег?Пожалуйста, дайте мне знать, так как я новичок в MooTools.Хотя я быстро обнаружил, что его приложения намного превосходят приложения jQuery (по крайней мере, для моих целей), я обнаружил, что его документация гораздо менее многословна, чем его синтаксис.
Решение
От Fx.Slide.js
:
Fx.Slide = new Class({
/* .. */
initialize: function(element, options){
this.addEvent('complete', function(){
this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0);
if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper);
}, true);
this.element = this.subject = document.id(element);
this.parent(options);
var wrapper = this.element.retrieve('wrapper');
this.wrapper = wrapper || new Element('div', {
styles: $extend(this.element.getStyles('margin', 'position'), {overflow: 'hidden'})
}).wraps(this.element);
this.element.store('wrapper', this.wrapper).setStyle('margin', 0);
this.now = [];
this.open = true;
},
/* .. */
Как вы видете, Fx.Slide
принимает элемент (this.element
), вы к нему применяете, оборачивает его в обертку div (this.wrapper
) с overflow: hidden
и margin
и position
элемента, а затем удаляет margin
элемента.
Поэтому удаление margin
это задумано.Чего я не понимаю, так это почему маржа не переносится в обертку.У вас могут быть некоторые CSS, изменяющие простые DIV в родительском элементе, который использует !important
и предотвращает Fx.Slide
от правильной передачи имущества.
Используете ли вы MooTools 1.2.3 с последней версией MooTools More (1.2.3.1)?
Кроме того, для Fx.Slide
для правильной работы ваша страница потребности быть в стандартном режиме.У вас есть документ XHTML или HTML (строгий или переходный) в качестве первого элемента вашей разметки?(Нет XML-пролога).В худшем случае, если это все равно не работает, используйте следующее:
$('mydiv').getParent().setStyle('margin', '0 auto');
MooИнструменты это отличная среда JavaScript для работы, и я лично считаю, что это намного мощнее, чем jQuery (исключая тот факт, что у jQuery огромное сообщество).К сожалению, More
согласованности пакета (который является эквивалентом плагинов jQuery) в некоторых аспектах несколько недостает.