Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > jQuery-Dropdown-Box-Verschönerungs-Plug-in im flachen Stil FancySelect Verwendungsleitfaden_jquery

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

WBOY

Freigeben： 2016-05-16 16:14:34

Original

1329 Leute haben es durchsucht

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

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:

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:

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

Sie können sich das change.fs-Ereignis anhören, wenn sich die 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

Verwandte Etiketten：

jquery 下拉框

Quelle：php.cn

Vorheriger Artikel：Detaillierte Einführung in Puffer- und Streaming-Module in Node.js_node.js Nächster Artikel：Analyse der Bedeutung von Var in JavaScript_Grundkenntnisse

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors