Cómo hacer que los elementos seleccionables en ajax para la programación html5 y css3

Es posible que tenga una situación en la que desea que el usuario elija de una lista de elementos. AJAX permite a los programadores de HTML5 y CSS3 esa opción. los seleccionable widget es una gran manera de crear esta funcionalidad de una lista común. El usuario puede arrastrar o Ctrl + clic en los elementos para seleccionarlos. clases CSS especiales se aplican automáticamente para indicar que el artículo está siendo considerado para seleccionar o seleccionado.

Siga estos pasos para hacer un elemento seleccionable:

Video: Curso de jQuery en español, Cómo Seleccionar Elementos del DOM

Comience con una lista desordenada.

Construir una lista desordenada estándar en el código HTML. Dar el ul un ID de modo que pueda ser identificado como un nodo jQuery:

Video: Cómo crear un Indicador de Carga Web (Page Loader Spinner) con Animaciones CSS3 y javascript

 

seleccionable

  • alfa
  • beta
  • gama
  • delta
  • Añadir clases CSS para la selección y estados seleccionados.

    Video: HTML5 CSS3 JAVA PHP MYSQL AJAX TUTORIALES

    Si desea que los elementos seleccionables para cambiar de apariencia cuando los artículos están siendo seleccionados o han sido seleccionados, se suman las clases CSS como se muestra. Algunas clases especiales (ui-seleccionar y ui-seleccionados) Están predefinidos y se añadirá a los elementos en los momentos apropiados:

     
  • En el en eso() función, especifique la lista como un nodo seleccionable.

    Utilice la sintaxis estándar de jQuery: seleccionable ().

     ps"#selectable") .selectable () -
  • La clase está unido a todos los elementos cuando se han seleccionado. Asegúrese de añadir algún tipo de CSS para esta clase, o usted no será capaz de decir que los artículos han sido seleccionados.

    Video: Como crear preloader con html5 - css3 - javascript (Muy Fácil)

    Si usted quiere hacer algo con todos los elementos que han sido seleccionados, basta con crear un grupo de elementos con jQuery la ui-seleccionados clase:

    var selectedItems = $ (".ui seleccionado-") -
    Artículos Relacionados