Wie eine sortierbare Schnittstelle in CSS3 zu erstellen

Bestimmte Arten von Sortier sind einfach für Computer zu tun, und Sie möchten Ihre CSS3-Codierung, um diese Situation zu schaffen. Zum Beispiel kann ein Computer-Produkte in alphabetischer Reihenfolge viel schneller als ein Mensch kann, vor allem, wenn die Liste lang ist.

Allerdings Sorten sind nicht immer logisch. Sie können die Benutzer wollen eine Liste der Elemente von persönlichen Vorlieben oder anderen Kriterien zu sortieren, dass der Computer nicht einmal verstehen kann. In diesen Fällen müssen Sie ein Mittel manuelle Art zu erlauben, - und dieses Beispiel gibt Ihnen genau das, was Sie brauchen.

Im folgenden Beispiel kann ein Benutzer sortieren Gegenstände von nicht näher genannten Kriterien. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Interaktionen Ordner des herunterladbaren Code wie SortContent.HTML.)

$ (Function () {$ ( "# sortiermich") sortierbar () -.}) Funktion Ausstellungsergebnisse () {// Erstellen der ouput string.var Output = "Die Sortierreihenfolge ist: n" - // Wir liegen jeweils die erforderlichen Elemente und // sie auf den String hinzufügen $ ( "# sortiermich p"), ​​die jeweils (function (Index-Element) {Output + = element.innerHTML.substr (74) -}) -.. // das Ergebnis anzeigen .alert (Output) -}

Die sortierbare () Aufruf ist alles, was Sie tun müssen, um die Liste sichtbar sortierbar zu machen. Der Benutzer kann die Elemente zu platzieren, was diese Elemente können in beliebiger Reihenfolge beliebig sein. Um diesen Anruf funktioniert, jedoch benötigen Sie einen Container zu erstellen - ein

in diesem Fall - und eine Liste von Elementen, die speziell

Tags. Die sortiermich id geht mit dem

.

die Elemente, um Zugriff ist auch eine Voraussetzung. Ansonsten gibt es keinen Punkt der Anwender sortieren Sie die Elemente in der Vermietung. In diesem Fall ist es tatsächlich einfacher, andere jQuery Funktion zu nutzen, um die Liste der Elemente in der Reihenfolge zu erhalten, in denen sie auftreten, und sie auf diese Weise zu verarbeiten.

Ausstellungsergebnisse () zeigt eine Technik zur Durchführung dieser Aufgabe. Sie beginnen mit den entsprechenden Selektor zu schaffen, die mit der beginnt

, Sortiermich und endet mit jeweils

markieren sie enthält. Die anonyme Funktion empfängt sowohl einen Index und ein Element Argument. die Innerhtml-Eigenschaft des Elements Durch die Überprüfung, können Sie den Moniker für das erhalten

-Tag. Das Ergebnis wird in einem Dialogfeld angezeigt.

An diesem Beispiel wird auch die Verwendung einer speziellen jQuery UI CSS-Stil. Dieser Stil erzeugt einen Doppelpfeil, die der Benutzer hilft zu verstehen, dass jedes Element in der Liste nach oben oder unten. Sie schaffen es eine mit so was:

Sie können eine Liste dieser Symbole finden Sie unter jQuery UI-CSS-Framework. Es ist wichtig, Symbole zu schaffen, die die Art und Weise Ihrer Liste Bildschirm erscheint entsprechen.

Ähnliche

Menü