Почему MooTools удаляет поле при создании экземпляра Fx.Slide? - PullRequest
Новая
       25

Почему MooTools удаляет поле при создании экземпляра Fx.Slide?

0 голосов
/ 08 августа 2009

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

1 Ответ

2 голосов
/ 08 августа 2009

С 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 (Strict Or Transitional)? (Без пролога XML). В худшем случае, если это все еще не работает, используйте следующее: 

$('mydiv').getParent().setStyle('margin', '0 auto');

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

...