color animate jquery user-interface yui terminology

jquery - animate - ¿Cómo se llama este patrón de IU?



jquery ui tooltip html (13)

A menudo se lo conoce como "Mover" o "Mover Lista".

Aquí hay ejemplos de JavaScript y JQuery.

http://javascript.internet.com/miscellaneous/move-dual-list.html

http://www.hscripts.com/scripts/JavaScript/move-list.php

http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html

http://kgaddy.com/jqueryMoverBoxes/

Las implementaciones a menudo le permiten realizar selecciones múltiples y mover todos los elementos seleccionados a la vez.

Otra variante es habilitar el doble clic para causar el movimiento.

Estoy intentando descubrir cómo se llama este tipo de cosas y, finalmente, cómo puedo crear uno en un navegador web. Se ve así (captura de pantalla de la primera aplicación que se le ocurrió):

El componente / patrón específico que estoy buscando son los dos cuadros de lista ("Equipo incluido" y "Equipo excluido") que representan la inclusión / exclusión de elementos de un conjunto. Realmente no estoy buscando el nombre de WPF (si lo hay) pero podría ser útil.

Estoy buscando el nombre de esta cosa, si es que hay una, y si realmente quieres alegrarme, puedes señalarme una forma jQuery o YUI de hacer una de estas transacciones en un navegador.


Aquí hay dos ejemplos que no son jQuery o YUI, pero están cerca. Estos dos ejemplos son de ExtJS; uno utiliza dos árboles y las otras dos cuadrículas de datos. Ambos son muy hábiles y podrían ayudarte con las ideas de diseño.

Por cierto: normalmente los he oído denominados listas duales.

Dos rejillas

Dos árboles


En Designing Interfaces , una colección de patrones de UI , Jenifer Tidwell llama a eso un generador de listas . Tanto la "lista doble" como el "creador de listas" parecen ser nombres reconocidos tanto en la literatura académica como en industry resources industry , incluso apareciendo aquí en SO en este comentario en el modelo de lista de verificación larga para web .

No sé si hay un componente empaquetado de jQuery, pero DZone tiene un artículo sobre cómo hacerlo usando jQuery: un generador de listas HTML: un estudio sobre la aplicación de jQuery

También encontré un patrón de generador de listas diferente que toma un enfoque muy diferente al mismo problema central.

Los patrones en esos y otros catálogos de patrones de diseño similares también pueden darle inspiración para otras formas de atacar el problema. Personalmente, siempre he considerado el patrón de "lista doble" como un truco para el que hemos tenido alternativas mucho mejores para ... décadas, ahora :-)

Actualización: Acabo de tropezar con este patrón también etiquetado como una "swaplist" en Tklib y un "cuadro de lista "swaplist" en la Tklib [incr Widgets] Tk "mega-widget". Por lo tanto, lo encontrará en Perl/Tk , Tkinter , Ruby/Tk , y los widgets "en cualquier lugar (otro) fino (Tk) se venden".


Es realmente una lista de selecciones múltiples glorificada. Dado que solo hay 2 estados "incluidos" (seleccionados) "excluidos" (no seleccionados). Hay un bonito widget de selección múltiple que divide los elementos seleccionados y no seleccionados en 2 columnas y te permite arrastrar y soltar entre dos:

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


Escuché a un vendedor referirse a ellos como slushbuckets .



Mis colegas y yo siempre nos hemos referido a esto como la "selección de dos cajas". Parece salirse de la lengua muy bien.


No creo que haya un nombre "oficial", típicamente llamado "lista doble" o ... aún más comúnmente conocido como "el lugar donde tienes dos casillas y puedes mover cosas intermedias".

Aquí hay un complemento jQuery para esto: https://github.com/Geodan/DualListBox


No es que Microsoft UXGuide sea ​​definitivo por ningún medio o tan completo como debería ser, pero se refieren a este concepto como un Generador de listas .

Recientemente he estado buscando ejemplos de este concepto de UI para tener una idea de las mejores prácticas para cuándo usar flechas o botones etiquetados, etc. La búsqueda que ha producido la mayoría de los ejemplos a través de Google images ha sido dual list ui .

En términos de una solución jQuery para la segunda parte de su pregunta, creo que la respuesta de infinito es probablemente la más adecuada, pero solo quería darle mi granito de arena por lo que he encontrado con respecto a este patrón de IU.


No hay un control estándar para esto. Por lo general, se implementa con dos listas y algunos botones para mover uno o todos los elementos de una lista a otra y viceversa. En lugar de un botón para mover un solo elemento, se puede usar un doble clic. Para mover uno o más elementos dag y drop se pueden emplear.

En cuanto al nombre del patrón ... Realmente no tengo una idea.


No sé si hay un nombre propio, pero DevX tiene una página que cubre una implementación directa de JavaScript de tal cosa.


Siempre me he referido a ellos como "Componentes de Shuttle", ya que están intercambiando información de ida y vuelta, parece que esto es algo común . Pensé que lo agregaría a la lista de posibilidades.


Siempre pensé que se llamaba acumulador , pero me costó mucho encontrar algo para apoyar eso en Google. Aquí hay una mención de ello en una oscura tesis de postgrado sobre filosofía acerca de la usabilidad de UI .

La Figura 4-1 muestra un ejemplo de una regla de reorientación aplicada a un widget acumulador (es decir, un componente que transfiere elementos de la lista izquierda de valores posibles a la lista correcta de elementos seleccionados acumulados).

Figura 4-1 http://www.freeimagehosting.net/uploads/630d566db7.png

Y otra mención en algunos proyectos estudiantiles de 1998 .