Pretty Select Box Replacement - jQuery Wowdown
| File Size: | 18.1 KB | 
|---|---|
| Views Total: | 385 | 
| 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.











