Pretty jQuery Custom Select Box Plugin - tail.select
File Size: | 34.3 KB |
---|---|
Views Total: | 6025 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
tail.select is a robust jQuery plugin that helps you style/customize the default single- or multi- select boxes and allows custom check icons for each status of (un)selected options.
Important NOTE:
The tail.select library now works as a vanilla JavaScript plugin. The latest demo, documentaition are now available on Powerful Single & Multiple Select Library – tail.select.
Basic Usage:
1. load the required tail-select.css
in your document's head section.
<link rel="stylesheet" href="path/to/tail-select.css">
2. Load the necessary jQuery library together with jQuery tail.select and jQuery mousewheel plugin at the end of your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="path/to/jquery.mousewheel.min.js"></script> <script src="path/to/jquery.tail-select.min.js"></script>
3. Call the plugin with default settings on your existing select element and done.
$("select").tailSelect();
4. Full options. Override the following JS options during initialization to customize your select boxes.
// allows to remove a selected option on a single select field. "single_allow_deselect":false, // limits the number of selectable options. "multi_limit": 0, // text to be displayed if the user reached the "multi_limit". "multi_limit_text":"You can't add more options", // displays the number of selected options as well as the "multi_limit". "multi_show_count":true, // moves each selected option to the top of the options-list or to an own container. "multi_moveto": false, // "multi_hide_selected":true, // enables the option-description feature "description": false, // hides each disabled option in the options-list "hide_disabled":false, // placeholder "placeholder": "Select an Option...", // text to be displayed if all options are selected or if the select field has no option. "text_empty": "No Options available", // custom icons. "icons": { "show": true, "class": "tailMS-icon", "icon_close":"tailMS-icon-close", "icon_pull-up":"tailMS-icon-pull-up", "icon_pull-down":"tailMS-icon-pull-down", "icon_optgroup":"tailMS-icon-optgroup", "icon_single-option":"tailMS-icon-single", "icon_single-hover":"tailMS-icon-single-hover", "icon_single-select":"tailMS-icon-single-selected", "icon_single-deselect":"tailMS-icon-single-deselect", "icon_multi-option":"tailMS-icon-multi", "icon_multi-hover":"tailMS-icon-multi-hover", "icon_multi-select":"tailMS-icon-multi-selected", "icon_multi-deselect":"tailMS-icon-multi-deselect" }
5. Available events.
// triggered after the Tail.Select field is fully initialized. $("select").on("tailSelect:ready", function(event, id, selector, element){ // do something }); // triggered on each Select and De-Select action. $("select").on("tailSelect:change", function(event, option, selected){ // do something }); // triggered if the user reached the limit of an option field. $("select").on("tailSelect:limit", function(event, number, limit){ // do something }); // triggerd by the user or also by the initialization. $("select").on("tailSelect:empty", function(event, complete, group){ if(complete === true){ makeIt_cooler(); } else { makeIt_awesome(this, group); }; });
Changelog:
v0.4.2 (2018-10-17)
- update.
This awesome jQuery plugin is developed by pytesNET. For more Advanced Usages, please check the demo page or visit the official website.