jQuery-Dropdown-Box-Verschönerungs-Plug-in im flachen Stil FancySelect Verwendungsleitfaden_jquery

FancySelect ist ein kleines und praktisches jQuery-Dropdown-Box-Verschönerungs-Plug-in. Dieses Dropdown-Box-Verschönerungs-Plug-In verwendet einen flachen Designstil und ist eines der Dropdown-Box-Verschönerungs-Plug-Ins erster Wahl für Entwickler, die sich für Mode interessieren.

Anwendung

HTML-Struktur

FancySelect ist sehr einfach zu verwenden und kann in Verbindung mit jQuery oder Zepto verwendet werden. Platzieren Sie einige Dropdown-Box-Komponenten auf der Seite und rufen Sie dann das Dropdown-Box-Plugin über die Methode .fancySelect() auf. Wenn eine Option im Dropdown-Feld keinen Wert hat, verwendet das Plugin eine Art Platzhaltertext, um sie zu ersetzen.

Standardmäßig verwendet FancySelect nur native Dropdown-Felder und -Stile auf iOS-Geräten. Wenn Sie es überschreiben möchten, setzen Sie „forceiOS“ auf „true“, wenn das Dropdown-Box-Plugin initialisiert wird.

FancySelect kann den Stil auch über das Datenklassenattribut des -Elements angeben. Mit dieser Methode können Sie verschiedene Stile von Auswahl-Dropdown-Feldern angeben.

Code kopieren Der Code lautet wie folgt:

Wählen Sie etwas aus…
Lorem
Ipsum
Dolor
Sitzen
Amet

JAVASCRIPT

Code kopieren Der Code lautet wie folgt:

$('.basic').fancySelect();

Update-Optionen

Wenn die Optionen Ihres Dropdown-Felds nach der Initialisierung des Plugins geändert werden, können Sie das Plugin anweisen, die Optionsliste zu aktualisieren, indem Sie die Methode update.fs im Dropdown-Feld auslösen.

Code kopieren Der Code lautet wie folgt:

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

Dropdown-Feld aktivieren/deaktivieren

Das FancySelect-Dropdown-Box-Plug-in setzt das Dropdown-Feld nach der Initialisierung automatisch in den deaktivierten Zustand. Wenn Sie den Status der Dropdown-Felder zurücksetzen müssen, können Sie sie mit den Methoden „enable.fs“ oder „disable.fs“ für das Element „select“ ändern.

Code kopieren Der Code lautet wie folgt:

Erste Option
Zweite Option

var mySelect = $('.my-select');
mySelect.fancySelect(); // derzeit aufgrund der HTML-Eigenschaft deaktiviert
// später…
mySelect.trigger('enable.fs'); // jetzt aktiviert
// noch später…
mySelect.trigger('disable.fs'); // jetzt wieder deaktiviert

Wenn Sie einige personalisierte Effekte erstellen müssen, können Sie die Methoden triggerTemplate und triggerTemplate verwenden, die beide über die Option option:

eine HTML-Zeichenfolge zurückgeben

Code kopieren Der Code lautet wie folgt:

Glühlampen
CFL
Halogen

$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
          return optionEl.text() '
'; } })

Sie können sich das change.fs-Ereignis anhören, wenn sich die Option ändert:

Code kopieren Der Code lautet wie folgt:

    Erste Option
    Zweite Option

var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // das Änderungsereignis des DOM auslösen, wenn FancySelect geändert wird