Wie man auswählbare Elemente in AJAX für HTML5 und CSS3 programmiert Programmierung - Dummies

Möglicherweise haben Sie eine Situation, in der der Benutzer aus einer Liste von Elementen auswählen soll. AJAX ermöglicht HTML5- und CSS3-Programmierern diese Option. Das wählbare Widget ist eine großartige Möglichkeit, diese Funktionalität aus einer gewöhnlichen Liste zu erstellen. Der Benutzer kann Elemente durch Ziehen oder Strg + Klick auswählen. Spezielle CSS-Klassen werden automatisch angewendet, um anzuzeigen, dass das Element für die Auswahl berücksichtigt oder ausgewählt wird.

Führen Sie die folgenden Schritte aus, um ein auswählbares Element zu erstellen:

1. Beginnen Sie mit einer ungeordneten Liste.

   Erstellen Sie eine standardmäßige ungeordnete Liste in Ihrem HTML. Geben Sie der ul eine ID, damit sie als jQuery-Knoten identifiziert werden kann:

   
   wählbar
   
   alpha
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Fügen Sie CSS-Klassen zum Auswählen und Auswählen von Zuständen hinzu.

   Wenn die auswählbaren Elemente das Aussehen ändern sollen, wenn die Elemente ausgewählt oder ausgewählt wurden, fügen Sie CSS-Klassen wie gezeigt hinzu. Einige spezielle Klassen (ui-selection und ui-selected) sind vordefiniert und werden den Elementen zu den entsprechenden Zeiten hinzugefügt:

   h1 {text-align: center;} #selectable. ui-selection {Hintergrundfarbe: grau;} #selektierbar. ui-selected {Hintergrundfarbe: schwarz; color: white;}
   

3. Geben Sie in der Funktion init () die Liste als auswählbaren Knoten an.

   Verwenden Sie die standardmäßige jQuery-Syntax: selectable ().

   $ ("# wählbar"). wählbar();
   

Die Klasse ist an alle Elemente angehängt, wenn sie ausgewählt wurden. Stellen Sie sicher, dass Sie dieser Klasse eine Art CSS hinzufügen oder dass Sie nicht feststellen können, dass Elemente ausgewählt wurden.

Wenn Sie etwas mit allen Elementen machen wollen, die Sie ausgewählt haben, erstellen Sie einfach eine jQuery-Gruppe von Elementen mit der ausgewählten Klasse:

var selectedItems = $ (".ui-selected");