Hvordan du lager et sorterbart grensesnitt i CSS3 - dummies

Visse typer sortering er enkle for datamaskiner å gjøre, og du vil at CSS3-kodingen skal skape den situasjonen. For eksempel kan en datamaskin sette elementer i alfabetisk rekkefølge mye raskere enn en menneskelig boks, spesielt når listen er lang.

Men slags er ikke alltid logiske. Du vil kanskje at brukeren skal sortere en liste over elementer etter personlig preferanse eller andre kriterier som datamaskinen ikke engang kan forstå. I disse tilfellene trenger du et middel til å tillate manuelle sorter - og dette eksemplet gir deg akkurat det du trenger.

Følgende eksempel lar en bruker sortere elementer etter uspesifiserte kriterier. (Du finner fullstendig kode for dette eksemplet i mappen Kapittel 06Interactions av den nedlastbare koden som SortContent. HTML.)

$ (funksjon () {$ ("# SortMe"). Sorterbar ();}) funksjon ShowResults () {// Opprett ouput-strengen. var Output = "Sorteringsrekkefølgen er: n"; // Finn hvert av de obligatoriske elementene og / / legg dem til strengen. $ ("# SortMe p"). hver (funksjon (indeks, element) {Output + = element. innerHTML. substr (74);}); // Vis resultatet. varsel (Output);}

Sortable () -samtalen er alt du trenger for å gjøre listen synlig sorterbar. Brukeren kan plassere elementene, uansett hvilke elementer som helst, i hvilken som helst rekkefølge som er ønsket. For å få denne samtalen til å fungere, trenger du imidlertid å opprette en container - i dette tilfellet - og en liste over elementer, spesielt

koder. SortMe id går med.

Tilgang til elementene i rekkefølge er også et krav. Ellers er det ikke noe poeng i å la brukeren sortere elementene. I dette tilfellet er det faktisk lettere å bruke annen jQuery-funksjonalitet for å få listen over elementer i rekkefølgen de vises og behandle dem på den måten.

ShowResults () viser en teknikk for å utføre denne oppgaven. Du begynner med å opprette den aktuelle velgeren, som begynner med SortMe, og slutter med hver

-koden som den inneholder. Den anonyme funksjonen mottar både en indeks og et elementargument. Ved å sjekke elementets innerHTML-egenskap, kan du få moniker for den

-taggen. Resultatet vises i en dialogboks.

Dette eksemplet benytter også en spesiell jQuery UI CSS-stil. Denne stilen oppretter en dobbelpilot som hjelper brukeren til å forstå at hvert element kan bevege seg opp eller ned i listen. Du oppretter den ved å bruke slik:

Du finner en liste over disse ikonene på jQuery UI CSS Framework. Det er viktig å lage ikoner som samsvarer med måten listen vises på skjermen.