jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery

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="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery" >" data-right="1">One</option>
<option value="2" class="option_two" data-subtitle="To" data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery" >" 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="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery" >" data-right="3">Three</option>
<option value="4" class="option_four" selected data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery" >" data-right="4">Four</option>
<option value="5" class="option_five" selected data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery verwendet das Selectator-Plug-in, um ein Dropdown-Listenfilterfeld mit Mehrfachauswahl zu implementieren (mit Quellcode-Download)_jquery" >" 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>

Der Code auf

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:

https://github.com/Lepshey/jquery.selectator-custom