Selectator ist ein jQuery-Dropdown-Listenfeld-Plug-in, das Mehrfachauswahl- und Suchfilterfunktionen implementiert. Es unterstützt die Suche und kann sich direkt auf das ursprüngliche Auswahlfeld auswirken, das als Datencontainer verwendet wird. Mit diesem Dropdown-Listenfeld-Plug-in können Sie mehrere Optionen gruppieren, die Symbole der Optionen festlegen, die Optionen suchen und filtern sowie Mehrfachauswahlen durchführen.
Effektanzeige Quellcode-Download
Anwendung
Um dieses Dropdown-Kategoriefeld-Plug-in zu verwenden, müssen Sie die Dateien fm.selectator.jquery.css, jQuery und fm.selectator.jquery.js in die Seite einfügen.
<link rel="stylesheet" href="fm.selectator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.selectator.jquery.js"></script>
HTML-Struktur
Die HTML-Struktur einer Dropdown-Liste mit Symbolebene und Gruppierungsoptionen ist wie folgt:
<label for="select"> Multi select with custom content: </label> <select id="select" name="select" multiple> <optgroup label="Group one" class="group_one"> <option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option> <option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option> </optgroup> <optgroup label="Group two" class="group_two"> <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option> <option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option> <option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option> <option value="6" class="option_six">Six</option> </optgroup> <optgroup label="Group three" class="group_three"> <option value="7" class="option_seven">Seven</option> </optgroup> <option value="8" class="option_eight" data-subtitle="Otte">Eight</option> <option value="9" class="option_nine">Nine</option> <option value="10" class="option_ten" selected>Ten</option> <option value="11" class="option_eleven" selected>Eleven</option> <option value="12" class="option_twelve">Twelve</option> <option value="13" class="option_thirteen">Thirteen</option> <option value="14" class="option_fourteen">Fourteen</option> </select> <input value="activate selectator" id="activate_selectator4" type="button">
Plugin initialisieren
Nachdem das Seiten-DOM-Element geladen wurde, kann das Dropdown-Listen-Plug-in über die Methode selector() initialisiert werden.
$('#selectBox').selectator();Sie können es auch direkt mit Tags initialisieren:
<select multiple class="selectator" data-selectator-keep-open="true">
Konfigurationsparameter
$('#selectBox').selectator({
prefix: 'selectator_', // CSS class prefix
height: 'auto', // auto or element
useDimmer: false, // dims the screen when option list is visible
u**arch: true, // if false, the search boxes are removed and
// `showAllOptionsOnFocus` is forced to true
keepOpen: false, // if true, then the dropdown will not close when
// selecting options, but stay open until losing focus
showAllOptionsOnFocus: false, // shows all options if input box is empty
selectFirstOptionOnSearch: true, // selects the topmost option on every search
searchCallback: function(value){}, // Callback function when enter is pressed and
// no option is active in multi select box
labels: {
search: 'Search...' // Placeholder text in search box in single select box
}
});Andere verfügbare Attribut-Tags
Sie können die Anzeigeinformationen der Dropdown-Liste erweitern, indem Sie die Tags data-left, data-right und data-subtitle verwenden. Sie können über CSS mit den Präfixen prefix_title, prefix_left, prefix_right und prefix_subtitle gestaltet werden. Da es sich bei den Daten ausschließlich um reinen HTML-Code handelt, können Sie auch Bildcode verwenden.
<select id="selectBox"> <!-- Normal option tag --> <option value="1">This is the title</option> <!-- Extended option tag --> <option value="2" data-left="This is the left section" data-right="This is the right section" data-subtitle="This is the section under the title">This is the title</option> </select>
wird als Struktur ähnlich der folgenden angezeigt:
CSS-Klasse
| kelas | Penerangan |
| elemen_awalan | Ini ialah kotak senarai lungsur turun baharu. Ia datang dengan kelas tambahan yang sama: single dan multiple , yang digunakan untuk menetapkan sama ada pilihan tunggal atau berbilang pilihan.Juga options-visible dan options-hidden Digunakan untuk menetapkan sama ada pilihan itu kelihatan |
| prefix_chosen_item | Bekas untuk pilihan terpilih |
| prefix_chosen_item | Bekas untuk pilihan yang sedang dipilih |
| prefix_chosen_item_title | Tajuk pilihan yang sedang dipilih |
| prefix_chosen_item_left | Kandungan di sebelah kiri pilihan yang sedang dipilih |
| prefix_chosen_item_right | Kandungan di sebelah kanan pilihan yang sedang dipilih |
| prefix_chosen_item_subtitle | Sari kata bagi pilihan yang sedang dipilih |
| awalan_pilihan_item_buang | Alih keluar butang untuk pilihan yang sedang dipilih |
| awalan_input | Ini ialah kotak input untuk pemilih Ini digunakan bersama-sama dengan pilihan-kelihatan atau pilihan-tersembunyi untuk menunjukkan dan menggayakannya secara berbeza jika ia ialah kotak pilihan berbilang atau kotak pilihan tunggal. |
| panjang_teks awalan | Digunakan untuk mengira saiz input dalam kotak pilihan berbilang |
| pilihan_awalan | Bekas senarai pilihan |
| prefix_group_header | Tajuk kumpulan |
| kumpulan_awalan | Bekas kumpulan |
| pilihan_awalan | Pilihan keputusan.Ia menggunakan kelas active untuk menunjukkan pilihan yang sedang diaktifkan |
| awalan_pilihan_tajuk | Tajuk pilihan hasil |
| prefix_option_left | Kandungan di sebelah kiri pilihan hasil |
| pilihan_awalan_kanan | Kandungan di sebelah kanan pilihan hasil |
| prefix_option_subtitle | Sari kata di sebelah kanan pilihan hasil |
| prefix_dimmer | malap |
Kaedah
| 方法 | 描述 |
| refresh | 该方法用于刷新插件 |
| destroy | 该方法用于销毁插件 |
Alamat github bagi pemalam senarai juntai bawah jquery.selectator-custom ialah:
