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

StackOverflow https://stackoverflow.com/questions/1249237

  •  12-09-2019
  •  | 
  •  

Вопрос

у меня есть <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) в некоторых аспектах несколько недостает.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top