sumoselect是一个jQuery选择替换插件,它将原生选择框变成一个响应灵敏、动画化、完全可自定义的下拉选择列表。
1.在网页中包含最新版本的jQuery库。
<script src="/path/to/cdn/jquery.min.js"></script>
2.在jQuery库之后包含jQuery sumoselect插件的javascript和CSS。
<script src="jquery.sumoselect.min.js"></script> <link href="sumoselect.css" rel="stylesheet" />
3.按照Html结构创建一个多选列表,如下所示。
<select multiple="multiple" placeholder="Pick a brand" class="SlectBox"> <option selected value="volvo">Volvo</option> <option value="ford">Ford</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> <option value="bmw">BMW</option> </select>
4.调用插件以启用下拉选择列表。
$('.SlectBox').SumoSelect();
5.所有默认选项和回调。
// Dont change it here. placeholder: 'Select Here', // display no. of items in multiselect. 0 to display all. csvDispCount: 3, // format of caption text. you can set your locale. captionFormat:'{0} Selected', // format of caption text when all elements are selected. set null to use captionFormat. It will not work if there are disabled elements in select. captionFormatAllSelected:'{0} all selected!', // Screen width of device at which the list is rendered in floating popup fashion. floatWidth: 400, // force the custom modal on all devices below floatWidth resolution. forceCustomRendering: false, nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'], // true to POST data as csv ( false for Html control array ie. deafault select ) outputAsCSV: false, // seperation char in csv mode csvSepChar: ',', // display ok cancel buttons in desktop mode multiselect also. okCancelInMulti: false, // for okCancelInMulti=true. sets whether click outside will trigger Ok or Cancel (default is cancel). isClickAwayOk: false, // im multi select mode wether to trigger change event on individual selection or combined selection. triggerChangeCombined: true, // to display select all button in multiselect mode.|| also select all will not be available on mobile devices. selectAll: false, // Display a disabled checkbox in multiselect mode when all the items are not selected. selectAllPartialCheck: true, // to display input for filtering content. selectAlltext will be input text placeholder search: false, // placeholder for search input searchText: 'Search...', searchFn: function(haystack, needle) { // search function return haystack.toLowerCase().indexOf(needle.toLowerCase()) < 0; }, noMatch: 'No matches for "{0}"', // some prefix usually the field name. eg. '<b>Hello</b>' prefix: '', // all text that is used. don't change the index. locale: ['OK', 'Cancel', 'Select All'], // set true to open upside. up: false, // set to false to prevent title (tooltip) from appearing showTitle: true, // im multi select - clear all checked options clearAll: false, // im multi select - close select after clear closeAfterClearAll: false, // Maximum number of options selected (when multiple) max: null, // Custom <li> item renderer renderLi: (li, _originalOption) => li
6.目前支持图标和自定义选项。
$('.SlectBox').SumoSelect({ renderLi: (li, originalOption) => { // Edit your li here return li; } });
7.API方法。
var mySelect = $('.SlectBox').SumoSelect(); // add a new item mySelect.add(value [,text][,index]) // remove an item mySelect.remove(index) // select an item mySelect.selectItem(index/value) // unselect an item mySelect.unSelectItem(index/value) // disable an item mySelect.disableItem(index) // re-enable an item mySelect.enableItem(index) // select all items mySelect.selectAll() // unselect all items mySelect.unSelectAll() // enable the plugin mySelect.enable() // disable the plugin mySelect.disable() // reload the plugin mySelect.reload()
8.事件。
$('.SlectBox').on('sumo:opened', function(sumo) { // Do stuff here }); $('.SlectBox').on('sumo:opening', function(sumo) { // Do stuff here }); $('.SlectBox').on('sumo:closed', function(sumo) { // Do stuff here }); $('.SlectBox').on('sumo:closing', function(sumo) { // Do stuff here });
2023-01-25
2022-07-30
2022-04-16
2022-02-10
2022-02-10
2022-01-05
2022-01-05
2022-01-05
2021-10-31
2021-09-03
2021-08-11
2021-08-04
2021-07-13
2021-07-06
2021-07-05
2021-07-01
2021-06-28
2021-06-27
2021-06-21
2021-06-19
2021-06-18
2021-06-17
2018-02-28
2017-03-07
2017-03-06
2017-03-03
2017-03-02
2016-04-30
2016-04-08
2016-03-08
2016-03-05
2016-03-04
2016-03-03
2016-02-23
2015-04-29
2015-04-17
2015-04-09
2015-04-07
2015-04-02
2015-04-01
2015-03-31
2015-02-13
2014-08-02
2014-07-28