Wie heißt dieses UI-Muster?

Question 1

Ich versuche herauszufinden, wie so etwas genannt wird, und schließlich, wie ich eines in einem Webbrowser erstellen kann. Es sieht so aus (Screenshot der ersten App, die mir in den Sinn kam):

Die spezifische Komponente / das Muster, nach der ich suche, sind die beiden Listenfelder (“Enthaltene Ausrüstung” und “Ausgeschlossene Ausrüstung”), die den Einschluss/Ausschluss von Artikeln aus einem Set darstellen. Ich suche nicht wirklich nach dem WPF-Namen (falls vorhanden), aber er könnte hilfreich sein.

ich bin Suchen Sie nach dem Namen dieses Dings, wenn es einen gibt, und wenn Sie mir wirklich den Tag versüßen wollen, können Sie mich auf eine jQuery- oder YUI-Methode hinweisen, um einen dieser Deals in einem Browser abzuschließen.

Question 2

Ich glaube nicht, dass es einen “offiziellen” Namen gibt, der normalerweise “Dual List” oder … noch häufiger als “das Ding, bei dem Sie zwei Boxen haben und Dinge dazwischen verschieben können” genannt wird.

Hier ist ein jQuery-Plugin dafür: https://github.com/Geodan/DualListBox

Question 3

Im Schnittstellen gestaltena UI-Muster Sammlung, Jennifer Tidwell nennt das a Listenersteller. Beide “doppelte Liste” und “Listenersteller” scheinen anerkannte Namen dafür in beiden zu sein akademische Literatur und Industrie Ressourcenerscheint sogar hier auf SO in diesem Kommentar zum Beitrag Langes Checklisten-UI-Muster für das Web.

Ich weiß nicht, ob es eine gepackte jQuery-Komponente gibt oder nicht, aber DZone hat einen Artikel über das Rollieren Ihrer eigenen mit jQuery: Ein HTML-List-Builder: Eine Studie zur Anwendung von jQuery

Ich fand auch eine anders Listenersteller Muster die einen ganz anderen Ansatz für dasselbe Kernproblem verfolgt.

Die Muster in diesen und anderen, ähnlich Musterkataloge entwerfen kann Ihnen auch Inspiration für andere Möglichkeiten geben, das Problem anzugehen. Ich persönlich habe das “Dual List”-Muster immer als einen kleinen Hack betrachtet, für den wir seit Jahrzehnten viel bessere Alternativen haben 🙂

Aktualisieren: Ich bin gerade über dieses Muster gestolpert, das auch als a bezeichnet wird “Tauschliste” in Tklib und ein “Disjunkte Listbox” in dem [incr Widgets] Tk “Mega-Widget”-Bibliothek. So finden Sie es in Perl/TK, Tkinter, Rubin/Tkund “Überall (anders) werden feine (Tk) Widgets verkauft.”

Aktualisierung: (2021) das Material-UI Die React-Komponentenbibliothek nennt dieses Muster a “Transferliste” oder ein “pendeln”. Ich habe jedoch keinen Verweis darauf in der Material Design-Spezifikation selbst gefunden, daher könnte dies eine Erfindung der Autoren der Komponentenbibliothek sein.

Question 4

Es ist wirklich eine verherrlichte Mehrfachauswahlliste. Da gibt es nur 2 Zustände “eingeschlossen” (ausgewählt) “ausgeschlossen” (nicht ausgewählt). Es gibt ein ziemlich nettes Multi-Select-Widget, das die ausgewählten und nicht ausgewählten Elemente in zwei Spalten aufteilt und Sie per Drag-and-Drop zwischen diesen beiden verschieben kann:

http://www.quasipartikel.at/multiselect/

Question 5

Ich habe gehört, ein Verkäufer bezeichnet sie als Schlammeimer.

Question 6

Nicht dass die Microsoft UX-Leitfaden auf jeden Fall definitiv oder so vollständig ist, wie es sein sollte, aber sie beziehen sich auf dieses Konzept als a Listenersteller.

Ich habe kürzlich auch nach Beispielen für dieses UI-Konzept gesucht, um eine Vorstellung von der besten Vorgehensweise für die Verwendung von Pfeilen oder beschrifteten Schaltflächen und dergleichen zu bekommen. Die Suche, die die meisten Beispiele durch Google-Bilder erbracht hat, war duale Liste ui.

In Bezug auf eine jQuery-Lösung für den zweiten Teil Ihrer Frage denke ich, dass die Antwort von Infinity wahrscheinlich am besten geeignet ist, aber ich wollte Ihnen nur meine zwei Cent zu dem geben, was ich in Bezug auf dieses UI-Muster gefunden habe.

Question 7

Ich habe sie immer als “Shuttle-Komponenten” bezeichnet, da Sie Informationen hin und her transportieren – das scheint so zu sein etwas gemein. Ich dachte mir, ich füge es der Liste der Möglichkeiten hinzu.

Question 8

Ich dachte immer, es heißt ein Akkumulator, aber ich hatte eine sehr harte Zeit, etwas zu finden, um dies auf Google zu unterstützen. Hier ist eine Erwähnung davon in einem Obskure Philosophie-Diplomarbeit über die Benutzerfreundlichkeit von Benutzeroberflächen.

Abbildung 4-1 zeigt ein Beispiel einer Neuorientierungsregel, die auf ein Akkumulator-Widget angewendet wird (dh eine Komponente, die Elemente aus der linken Liste möglicher Werte in die rechte Liste akkumulierter ausgewählter Elemente überträgt).

Und eine weitere Erwähnung in einigen studentische Projekte ab 1998.