Perché MooTools rimuovere il margine durante la creazione di un'istanza di Fx.Slide?

Question

Ho un <div> con la regola CSS margin: 0 auto; e sto usando MooTools a scivolare quando necessario.

Sembra che la mera istanza di un oggetto Fx.Slide rimuove il margine sul mio elemento. Cioè, mentre l'elemento usato per essere centrato all'interno del suo genitore, è ora allineato a sinistra. Proprio questa linea da solo sembra fare questo:

var slide = new Fx.Slide('mydiv');

posso contrastare questo effetto facendo qualcosa di simile a questo:

var slide = new Fx.Slide('mydiv');
$('mydiv').setStyle('margin', '0 auto');

Ma questo è grezzo e certamente non vogliono avere a che fare questo ogni volta che mi imbatto in questa situazione. E ancora di più, voglio sapere, perché fa MooTools rimuovere il margine, in primo luogo? C'è la possibilità che non lo so, alcuni parametri che ho trascurato? Per favore fatemi sapere, come io sono nuovo a MooTools. Mentre sto trovando subito che le sue applicazioni sono di gran lunga superiori a quelli di jQuery (almeno per i miei scopi), ho constatato che la sua documentazione è molto meno dettagliata rispetto la sua sintassi.

Answer 1

Da 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;
    },

    /* .. */

Come si può vedere, Fx.Slide prende l'elemento (this.element) si applica ad esso, avvolge in un div involucro (this.wrapper) con overflow: hidden e la margin e position dell'elemento e quindi rimuove il margin dell'elemento.

Quindi, la rimozione del margin legato alla progettazione. Quello che non capisco è il motivo per cui il margine non viene trasferito l'involucro. Si potrebbe avere un po 'di CSS modifica DIV pianura nel elemento genitore che utilizza !important ed è prevenire Fx.Slide di trasferire le proprietà in modo corretto.

Si sta utilizzando MooTools 1.2.3 con l'ultima versione di MooTools More (1.2.3.1)?

Inoltre, per Fx.Slide funzioni correttamente, la pagina ha bisogno per essere in modalità standard. Avete un XHTML o HTML doctype (oggettiva o di transizione) come prima cosa nella vostra markup? (No prologo XML). Nel peggiore dei casi, se ancora non funziona, utilizzare il seguente:

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

MooTools è grande quadro JavaScript per lavorare con e Personalmente ritengo che it è il modo più potente di jQuery (escludendo il fatto che jQuery ha un grande comunità). Purtroppo, il pacchetto More (che è l'equivalente di plugin jQuery) consistenza è peraltro alcuni aspetti.