Почему 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 (по крайней мере, для моих целей), я обнаружил, что его документация намного менее подробна, чем его синтаксис.


css slide margin mootools
person Josh Leitzel    schedule 08.08.2009    source источник

Ответы (1)


arrow_upward
2
arrow_downward

От 1_:

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');

MooTools - отличная среда JavaScript для работы, и я лично считаю, что он намного мощнее, чем jQuery (не считая того факта, что jQuery имеет огромное сообщество) . К сожалению, для пакета More (который является эквивалентом плагинов jQuery) в некоторых аспектах не хватает согласованности.

person Andrew Moore    schedule 08.08.2009
comment
Да, я использую обе эти версии. Просто скачал их пару часов назад. Моя страница - HTML 5 (просто ‹! DOCTYPE html›), но я просто переключил ее на XHTML Transitional, чтобы увидеть результат, и он все тот же. - person Josh Leitzel; 08.08.2009
comment
У вас есть CSS, влияющий на простой DIV в родительском элементе? - person Andrew Moore; 08.08.2009
comment
Родительский div также имеет значение 0 auto, а родительский элемент этого div - body, поле которого я установил на 0. Однако это, похоже, не влияет на него, потому что я только что удалил это объявление и ничего не изменилось. Если я не правильно понимаю конструктор, разве он явно не сообщает обертке, что у нее нет поля? Почему, как вы спросили, не переводится маржа? - person Josh Leitzel; 08.08.2009
comment
+1 за хороший ответ и за продвижение MooTools. : D Я тоже люблю mootools и думаю, что это гораздо более функциональная библиотека, чем jQuery. - person jrista; 08.08.2009
comment
@blueballoon: образец кода из mootools пытается скопировать поле и позицию из элемента, который вы пытаетесь сдвинуть, в оболочку, а затем устанавливает маржу обернутого элемента на 0 после сохранения его внутри оболочки. - person jrista; 08.08.2009
comment
@blueballon: Нет, он устанавливает для целевого элемента значение без поля, а для оболочки - исходное поле для целевого элемента. - person Andrew Moore; 08.08.2009
comment
Я создал полностраничный пример, чтобы вы могли легко увидеть, что происходит: pastebin.com/f18f3c2c2 (очевидно, вы необходимо изменить ссылки на файлы .js, где бы вы ни находились). - person Josh Leitzel; 08.08.2009