Warum MooTools den Rand entfernen, wenn eine Instanz von Fx.Slide zu schaffen?

Question

Ich habe eine <div> mit der CSS-Regel margin: 0 auto; und ich bin mit MooTools es gleiten kann, wenn erforderlich.

Es scheint, dass die bloße Instantiierung eines Fx.Slide Objekt den Rand auf meinem Element entfernt. Das heißt, während das Element in seinem übergeordneten verwendet werden sollte zentriert wird nun linksbündig ausgerichtet. Genau diese Linie allein scheint dies zu tun:

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

Ich kann diesen Effekt entgegenzuwirken, indem so etwas wie dies zu tun:

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

Das ist aber grob und ich will sicher nicht, dies jedes Mal, wenn ich in dieser Situation kommen zu tun haben. Und noch mehr, möchte ich wissen, Warum hat MooTools die Marge in den ersten Platz entfernen? Gibt es eine Möglichkeit, die ich weiß nicht, über, einige Parameter ich vernachlässigt habe? Bitte lassen Sie mich wissen, wie ich zu MooTools bin neu. Während ich schnell bin zu finden, dass seine Anwendungen sind weit und über die von jQuery (zumindest für meine Zwecke), ich finde, dass seine Dokumentation als die Syntax viel weniger ausführlich ist.

Answer 1

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

    /* .. */

Wie Sie sehen können, nimmt Fx.Slide das Element (this.element) Sie es anwenden, wickelt es in ein Wrapper div (this.wrapper) mit overflow: hidden und der margin und position des Elements und entfernt dann das margin des Elements.

So die margin Entfernen ist konstruktionsbedingt. Was ich nicht verstehe ist, warum die Marge nicht an den Wrapper übertragen wird. Sie könnten einige CSS Modifizieren Ebene DIVs in der übergeordneten Element, das !important verwendet wird, und verhindert, dass Fx.Slide von den Eigenschaften richtig zu übertragen.

Sind Sie MooTools 1.2.3 mit der neuesten Version von MooTools mit Mehr (1.2.3.1)?

Auch für Fx.Slide richtig arbeiten, um Ihre Seite muss im Standardmodus sein. Haben Sie einen XHTML oder HTML (streng oder Übergangs-) haben Doctype als das erste, was in Ihrem Markup? (Kein XML-Prolog). Im schlimmsten Fall, wenn es immer noch nicht funktioniert, verwenden Sie die folgenden Schritte aus:

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

MooTools ist groß JavaScript-Framework, mit zu arbeiten und ich persönlich finde, dass it ist viel mächtiger als jQuery (mit Ausnahme der Tatsache, dass jQuery a hat große Gemeinschaft). Leider ist die More Paket Konsistenz (das entspricht jQuery Plugins ist) etwas ist in einigen Aspekten fehlt.