Easy jQuery Based Drop Down Select List - DropKick

Easy jQuery Based Drop Down Select List - DropKick
File Size: 21KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

<script type="text/javascript" charset="utf-8">
$(function () {

$('.demo').dropkick({

startSpeed: 400, // the speed of fade in effect. A low value (lowest is probably 100) to stop the effect.
theme: 'black',
change: function (value, label) { // callback event
alert('You picked: ' + label + ':' + value);
}
});

});
</script>

This awesome jQuery plugin is developed by jQueryScript. For more Advanced Usages, please check the demo page or visit the official website.