Easy jQuery Based Drop Down Builder - EasyDropDown

EasyDropDown is a simple and touch-enabled jQuery plugin for creating easily styleable drop down elements like drop down menu, drop down select list, etc.

Basic Usage:

1. Include jQuery library and jQuery EasyDropDown plugin on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.easydropdown.js"></script>

2. Include required jQuery EasyDropDown CSS on the page

<link rel="stylesheet" type="text/css" href="easydropdown.css"/>

3. Create the html for a drop down list. Using data-settings attributes for options.

<select class="dropdown" tabindex="7" data-settings='{"wrapperClass":"metro"}'>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

4. Options

• cutOff (integer): The maximum number of items to show before scrolling (default false).
• wrapperClass (string): The class of the parent wrapper element, used to target styling (default 'dropdown').
• onSelect (function): A custom function to call when an item is selected. Useful for non-form input uses. An object containing the selected item's value and title is passed as an argument.
• nativeTouch (boolean): Fallback to native UI on touch-enabled devices (default true).

Change log:

v2.1.3 (2013-11-03)

• fixed scroll bug

v2.1.2 (2013-10-25)

• Descend from select tag

v2.0.5 (2013-09-22)

• Various fixes/improvements

---

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