jQuery menggunakan pemalam Pemilih untuk melaksanakan kotak penapis senarai juntai bawah berbilang pilihan (dengan muat turun kod sumber)_jquery

Pemilih ialah pemalam kotak senarai lungsur jQuery yang melaksanakan fungsi penapisan berbilang pilihan dan carian. Ia menyokong carian dan boleh menjejaskan kotak pilihan asal secara langsung, yang digunakan sebagai bekas data. Melalui pemalam kotak senarai juntai bawah ini, anda boleh mengumpulkan berbilang pilihan, menetapkan ikon pilihan, mencari dan menapis pilihan dan melakukan pilihan berbilang pilihan.

Paparan kesan Muat turun kod sumber

Cara menggunakan

Untuk menggunakan pemalam kotak kategori lungsur turun ini, anda perlu memperkenalkan fail fm.selectator.jquery.css, jQuery dan fm.selectator.jquery.js ke dalam halaman.

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>

Struktur HTML

Struktur HTML senarai juntai bawah dengan tahap ikon dan pilihan pengelompokan adalah seperti berikut:

<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">

Mulakan pemalam

Selepas elemen DOM halaman dimuatkan, pemalam senarai juntai bawah boleh dimulakan melalui kaedah pemilih().

$('#selectBox').selectator();

Anda juga boleh memulakannya terus menggunakan tag:

<select multiple class="selectator" data-selectator-keep-open="true">

Parameter konfigurasi

$('#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
}
});

Teg atribut lain yang tersedia

Anda boleh melanjutkan maklumat paparan senarai juntai bawah dengan menggunakan teg data-kiri, data-kanan dan sari kata data. Ia boleh digayakan melalui CSS, dengan awalan prefix_title, prefix_left, prefix_right dan prefix_subtitle. Data adalah semua kod HTML tulen, jadi anda boleh menggunakan kod imej juga.

<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>

Kod pada

akan muncul sebagai struktur yang serupa dengan yang berikut:

Kelas CSS

anzuzeigen

Klasse	Beschreibung
prefix_element	Dies ist ein neues Dropdown-Listenfeld. Es enthält die gleichen zusätzlichen Klassen: single und multiple , mit denen festgelegt wird, ob es sich um eine Einzelauswahl oder eine Mehrfachauswahl handelt.Auch options-visible und 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
prefix_input	Dies ist das Eingabefeld für den Selektor. Dies wird zusammen mit „options-visible“ oder „options-hidden“ verwendet, um es anders anzuzeigen und zu formatieren, wenn es sich um ein Mehrfachauswahlfeld oder ein Einzelauswahlfeld handelt.
prefix_textlength	Wird zur Berechnung der Größe der Eingabe im Mehrfachauswahlfeld verwendet
prefix_options	Optionslistencontainer
prefix_group_header	Gruppentitel
Präfixgruppe	Gruppencontainer
prefix_option	Ergebnisoptionen.Es verwendet Klasse active , um die aktuell aktivierte Option
prefix_option_title	Titel der Ergebnisoption
prefix_option_left	Inhalt links neben den Ergebnisoptionen
prefix_option_right	Der Inhalt auf der rechten Seite der Ergebnisoptionen
prefix_option_subtitle	Untertitel rechts neben den Ergebnisoptionen
prefix_dimmer	Dimmer

Methode

方法	描述
refresh	该方法用于刷新插件
destroy	该方法用于销毁插件

Die Github-Adresse des jquery.selectator-custom Dropdown-Listen-Plug-Ins lautet:

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