Pretty Select Box Replacement - jQuery Wowdown

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

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.