jQuery Select Dropdown List Replacement - Pretty Dropdowns
File Size: | 15.6 KB |
---|---|
Views Total: | 9309 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Pretty Dropdowns is a jQuery plugin used to replace the regular select
element with a nice-looking dropdown UI that preserves the native select methods.
Installation:
# NPM $ npm install pretty-dropdowns # Bower $ bower install pretty-dropdowns
How to use it:
1. First you need to load the prettydropdowns.css
in the header of the webpage that will provide the default styles for the dropdown.
<link href="prettydropdowns.css" rel="stylesheet">
2. Then load the prettydropdowns.js
after jQuery but before the closing body tag.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.prettydropdowns.js"></script>
3. Call the prettyDropdown()
method on your existing select
element and the plugin will take care of the rest.
$('select').prettyDropdown();
4. You can also add more CSS styles, just like in prettydropdowns.css
file.
5. Call the prettyDropdown()
method on your existing select
element and the plugin will take care of the rest.
$('select').prettyDropdown();
6. Default plugin options.
$('select').prettyDropdown({ // The default behavior is to move the selected item to the top. // If you want the order of items to remain static, then set this to true. classic: false, // Custom class to customize the drop-down menu style. customClass: 'arrow', // Width width: null, // Item height in pixels. height: 50, // The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. hoverIntent: 200, // The separator character to use for the list of selected items in a multi-select menu. multiDelimiter: '; ', // The maximum number of selected items to display in a multi-select menu before replacing it with a summary (e.g., "2/3 selected"). // To display "0/3 selected" instead of "None selected", set this option to -1. multiVerbosity: 99, // The icon or symbol to mark that an item is selected. HTML is accepted selectedMarker: '✓', // Callback afterLoad: function(){} });
Changelog:
v4.17.0 (2019-06-10)
- Added ability to keep menu open using hoverIntent: -1
- Fixed option group out of sync with widget if multiple options with same text
v4.15.0 (2019-06-09)
- Improved timestamp to prevent potential id collisions
- Fixed aria-activedescendant not getting updated
v4.13.0 (2018-09-08)
- Add width option
v4.12.2 (2018-04-26)
- Fix prefix/postfix issue in optgroup.
- Fix scrollTop returning zero.
2018-04-16
- Add prefix/suffix support for <optgroup>
2017-03-17
- Update to v4.11.0: Fixed None selected by default
2017-05-02
- Fix open menu hidden beyind another layer
2017-04-04
- Fixed Bug: using size attribute leads to rendering bug
- Optimize click handler; remove scrollIntoView()
2017-03-31
- dist Honor `size` attribute
2017-03-03
- Fix multi-select container height 1px larger
- Remove one reliance on !important
2017-03-02
- Add 'title' for <optgroup>
- Add 'data-prefix' and 'data-suffix' attributes
2017-02-28
- Add support for aria-label
- Add support for disabled <select> and <option>
2017-02-24
- Fix aria-expanded not updated in some cases
- Add id to <ul> for easier styling
2017-02-22
- Add aria-labelledby integration
2017-02-21
- Sync <select> for multi-select lists
2017-02-20
- Move :hover from container div to ul
2017-02-18
- Prevent navigation when menu closed; fix 1st item not in view issue
2017-02-17
- Add ARIA roles for accessibility
2017-02-12
- Fix missing right border in some cases
2017-02-09
- Fix keyboard navigation (filtering) issue
2017-01-19
- Fix nohover style getting overridden
2017-01-18
- allows for PgUp/PgDn navigation
2017-01-17
- v3.0.0
2017-01-09
- CSS update
2016-12-28
- JS update
2016-11-15
- Fix negative width issue
This awesome jQuery plugin is developed by thdoan. For more Advanced Usages, please check the demo page or visit the official website.