Wie man ein benutzerdefiniertes Widget aus dem Dialog jquery-ui ableitet

Question

Ich möchte ein jquery-ui-Widget erstellen und bin mir nicht sicher, wie ich das am besten angehen kann.

Das Widget verwaltet den Zustand einiger Daten, die in einem jquery-ui-Dialog gehostet werden.

Sollte ich ein benutzerdefiniertes Widget erstellen, fügen Sie in der Widget-Erstellungsfunktion einige Elemente zum Widget-Ziel hinzu und rufen Sie dann das Dialog-Widget auf meinem Widget-Ziel auf.

Oder

Gibt es eine Möglichkeit aus dem jquery-ui-Dialog zu erben und nur den Inhalt Teil davon außer Kraft setzen?

Answer 1

Es gibt einen Weg andere Widgets zu erweitern:

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

Aber ich würde nicht ermutigen, es auf einem Dialog mit, Schieber usw., weil z.B. Buttonset beruht auf der Existenz des Button-Widgets und wird (und kann) nicht erkennen, ob das Element eine Instanz eines Widgets ist, das den Button erweitert hat. Daher erzeugt es nur neue reine Schaltflächen-Widgets, was zu einem vermasselten Layout und DOM führt. Das Überschreiben von Teilen eines Widgets ist ebenfalls entscheidend: Der Erweiterungsmechanismus für Widgets wurde vor nicht allzu langer Zeit eingeführt, als einige Widgets bereits existierten. Die Entwickler von ihnen hatten diese Funktion nicht im Hinterkopf, daher könnte es immer noch Probleme geben. Ich aggregiere meine Widgets (Ihre erste Option): Erweitern Sie einfach die $.Widget und machen Sie das Element zu einem Dialog. Fügen Sie dann Ereignis-Listener für die Eigenschaften hinzu, die zwischen dem Dialogfeld und Ihrem benutzerdefinierten Widget synchronisiert werden müssen.

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

Auf diese Weise robuster als andere Widgets erstreckt (außer Sie das übergeordnete gebaut und wissen, was Sie tun), aber es hat es auch Nachteile ist. Z.B. Akzeptieren Sie auch die Optionen des aggregierten Widgets oder nur Teile davon? Oder tun Sie nichts davon und zwingen den Benutzer, den Dialog für alles aufzurufen, was nicht in Ihrem benutzerdefinierten Widget behandelt wird? Ich bevorzuge die zweite Option: Es ist zumindest ehrlich, weil dein Widget keine Dinge verspricht, die es nicht halten kann, aber es ist auch hässlich, weil du einmal eins und dann das andere Widget aufrufen kannst.

Ich bin immer noch nicht so glücklich mit meiner Lösung, aber die Erweiterung von Widgets brachte mich vor eine ganze Reihe neuer Probleme, deren Lösungen entweder die jQuery UI-Quelle gepatcht oder einen hässlichen Hack geschrieben hätten.

(Ich habe gerade festgestellt, dass diese Frage etwa ein Jahr alt ist, und der Fragesteller hat dieses Problem möglicherweise nicht mehr. Aber ich habe alles oben geschrieben und denke, dass es nicht so schlecht ist, nicht gepostet zu werden.)