If you want to revamp your default dropdown menus, give the DropKick jQuery plugin a try.
The plugin was originally created by Jamie Lottering, and the default theme was designed by Addison Kowalski, but it was recently taken over by Robert DeLuca and is available from GitHub as the download DropKick.js. Even though DropKick has been around since July 2011, the recent changes and the hand over to Mr. DeLuca indicate the plugin shows no signs of falling off the radar. According to the resource repository page, Mr. DeLuca plans to make it one of the best jQuery plugins available.
The one requirement
In order to use DropKick, your website or web pages must link to the latest version of jQuery, which is currently jQuery 1.10.2. So you don't have to worry about linking to the latest jQuery version, the best practice implementation is to use the Google hosted libraries resources forjQuery, using the script snippet below (this is added within the <head> section).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
How does the DropKick jQuery plugin work? The DropKick plugin transforms your existing select <select> lists into customizable HTML dropdowns. Name is the only required attribute -- unless you want to add keyboard tabbing to the dropdowns, and then you'll need to add a tabindex attribute to enable tabbed navigation. Since the DropKick plugin only uses these two attributes, your existing forms and AJAX requests will work the same without having to make major changes to your code. You'll only need to set a "class" or "id" to the select attributes.
Browser acceptance
According to the repository resource page, the DropKick plugin has been tested and currently works in Opera 10+, Google Chrome 10+, Firefox 5+, Safari 5+, and Internet Explorer 7+.
Implementing the DropKick jQuery plugin
1. Be sure the jQuery library is called from the <head> of your website or web pages.
2. Download DropKick.js (which is available as a zip file), and then unzip the files to your web root directory (i.e., web/dk). Then, at a minimum, add all the calls to these DropKick script and CSS files:
- dropkick.css
- example.css
- jquery.dropkick.js
- jquery.dropkick-min.js
3. Set a "class" or "id" on the <select> attributes. The example uses the following:
- class="default"
- class="change"
- class="custom_theme"
4. Call the JavaScript function found in the example, which is also included within the download, and the snippet of the code is copied below:
<script type="text/javascript" charset="utf-8">
$(function () {
$('.default').dropkick();
$('.black').dropkick({
theme : 'black'
});
$('.existing_event').dropkick();
$('.change').dropkick({
change: function (value, label) {
alert('You picked: ' + label + ':' + value);
}
});
$('.custom_theme').dropkick({
theme: 'black',
change: function (value, label) {
$(this).dropkick('theme', value);
}
});
$('.dk_container').first().focus();
});
</script>
Figure A shows the example page as displayed in Google Chrome.
Figure A
I also tested the example page on my iPhone using Google Chrome and found all the dropdowns worked as expected (Figure B).
Figure B
Summary
If you're looking to revamp your default dropdown menus, you might consider using the DropKick jQuery plugin. Implementation is easy, and the example page provides plenty of use case samples to get you started.
0 comments:
Post a Comment