Pretty Select Box Replacement - jQuery Wowdown
File Size: | 18.1 KB |
---|---|
Views Total: | 357 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Wowdown is a jQuery plugin that converts the regular select boxes into beautiful and animated dropdowns with lots of customization options.
How to use it:
1. Load the jQuery Wowdown plugin's files in the HTML document.
<link rel="stylesheet" href="/path/to/css/wowdown.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/wowdown.min.js"></script>
2. Define the placeholder of the dropdown using the data-placeholder
attribute:
<select id="example" data-placeholder="Select A Language"> <option value="jquery">jQuery</option> <option value="script">Script</option> <option value="net">.net</option> </select>
3. Call the function wowdown
on the select element and done.
$(function(){ $('#example').wowdown(); });
4. Customize the appearance of the dropdown using the following options.
$('#example').wowdown({ background: "#e5e5e5", active_background: "#fff", placeholder_color: "#000", placeholder_active_color: "#000", option_color: "#000", vertical_padding: "15px", horizontal_padding: "40px", });
5. Enable the intense
mode, which means that the dropdown is opened in a fullscreen popup.
$('#example').wowdown({ intense: true, });
6. Trigger a function everytime you select an option.
<select id="example" data-callback="customCallback" data-placeholder="Select A Language"> <option value="jquery">jQuery</option> <option value="script">Script</option> <option value="net">.net</option> </select>
function customCallback(value) { alert("The value selected is " + value) }
This awesome jQuery plugin is developed by dopevog. For more Advanced Usages, please check the demo page or visit the official website.