
DropKick is a fast jQuery plugin that turns a standard html select box into a clean and skinnable drop down list that supports native keyboard navigation and dynamic selects.
How to use it:
1. Include the latest jQuery java script library and jQuery dropkick in your html document
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.dropkick-min.js"></script>
2. Include required dropkick.css
for basic style
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.dropkick-min.js"></script>
3. Create an html list. Using tabindex
attribute to enable navigation between selects via tabbing
<select name="country" class="demo" tabindex="2"> <option value="AU">Australia</option> <option value="CA">Canada</option> <option value="DE">Germany</option> <option value="JP">Japan</option> <option value="GB">United Kingdom</option> <option value="US">United States</option> </select>
4. Create a custom theme
.dk_theme_black { background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aebcbf), color-stop(50%, #6e7774), color-stop(51%, #0a0e0a), color-stop(100%, #0a0809) ); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100% ); background: -o-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100% ); background: -ms-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100% ); background: linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100% ); } .dk_theme_black .dk_toggle, .dk_theme_black.dk_open .dk_toggle { background-color: transparent; color: #fff; text-shadow: none; } .dk_theme_black .dk_options a { background-color: #333; color: #fff; text-shadow: none; } .dk_theme_black .dk_options a:hover, .dk_theme_black .dk_option_current a { background-color: #E15A01; color: #fff; text-shadow: #604A42 0 1px 0; }
5. Call the plugin with options
$('.demo').dropkick({ /** * Called once after the DK element is inserted into the DOM. * The value of `this` is the Dropkick object itself. * * @config initialize * @type Function * */ initialize() {}, /** * Whether or not you would like Dropkick to render on mobile devices. * * @default false * @property {boolean} mobile * @type boolean * */ mobile: true, /** * Called whenever the value of the Dropkick select changes (by user action or through the API). * The value of `this` is the Dropkick object itself. * * @config change * @type Function * */ change() {}, /** * Called whenever the Dropkick select is opened. The value of `this` is the Dropkick object itself. * * @config open * @type Function * */ open() {}, /** * Called whenever the Dropkick select is closed. The value of `this` is the Dropkick object itself. * * @config close * @type Function * */ close() {}, // Search method; "strict", "partial", or "fuzzy" /** * `"strict"` - The search string matches exactly from the beginning of the option's text value (case insensitive). * * `"partial"` - The search string matches part of the option's text value (case insensitive). * * `"fuzzy"` - The search string matches the characters in the given order (not exclusively). * The strongest match is selected first. (case insensitive). * * @default "strict" * @config search * @type string * */ search: "strict", /** * Bubble up the custom change event attached to Dropkick to the original element (select). */ bubble: true });
Change log:
v2.2.4 (2018-02-13)
- bugfix
This awesome jQuery plugin is developed by robdel12. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 13.02.2018
- Source