Video: Javascript FullStack #10 , User Interface & Bootstrap 4 2025
Ciertos tipos de clasificación son fáciles de hacer para las computadoras y desea que su codificación CSS3 cree esa situación. Por ejemplo, una computadora puede poner elementos en orden alfabético mucho más rápido que una lata humana, especialmente cuando la lista es larga.
Sin embargo, los géneros no siempre son lógicos. Es posible que desee que el usuario ordene una lista de elementos por preferencia personal u otros criterios que la computadora ni siquiera puede comprender. En estos casos, necesita un medio para permitir géneros manuales, y este ejemplo le brinda exactamente lo que necesita.
El siguiente ejemplo permite a un usuario ordenar elementos por criterios no especificados. (Puede encontrar el código completo para este ejemplo en la carpeta del Capítulo 06Interacciones del código descargable como SortContent. HTML.)
$ (función () {$ ("# SortMe"). Sortable ();}) función ShowResults () {// Crea la cadena de salida. var Output = "El orden de clasificación es: n"; // Ubique cada uno de los elementos necesarios y // agréguelos a la cadena. $ ("# SortMe p"). cada uno (función (índice, elemento) {Salida + = elemento. innerHTML. substr (74);}); // Mostrar el resultado. alert (Salida);}
La llamada sortable () es todo lo que necesita hacer para hacer que la lista se pueda ordenar visiblemente. El usuario puede colocar los elementos, cualesquiera que sean esos elementos, en el orden deseado. Sin embargo, para que funcione esta llamada, debe crear un contenedor, en este caso, y una lista de elementos, específicamente etiquetas
. La ID de SortMe va con el.
El acceso a los artículos en orden también es un requisito. De lo contrario, no tiene sentido dejar que el usuario clasifique los artículos. En este caso, en realidad es más fácil usar otra funcionalidad de jQuery para obtener la lista de elementos en el orden en que aparecen y procesarlos de esa manera.
ShowResults () muestra una técnica para realizar esta tarea. Comienza por crear el selector apropiado, que comienza con SortMe y termina con cada etiqueta
que contiene. La función anónima recibe un índice y un argumento de elemento. Al verificar la propiedad innerHTML del elemento, puede obtener el moniker para esa etiqueta
. El resultado se muestra en un cuadro de diálogo.
Este ejemplo también hace uso de un estilo especial jQuery UI CSS. Este estilo crea una flecha de doble punta que ayuda al usuario a comprender que cada elemento puede moverse hacia arriba o hacia abajo en la lista. Usted lo crea usando un tipo de esto:
Puede encontrar una lista de estos iconos en jQuery UI CSS Framework. Es importante crear iconos que coincidan con la forma en que aparece su lista en la pantalla.
