Awesome <Select> v0.1.0 beta

Because the standard select is too f*kng ugly

_Developed by
Prev Wong
to

Installation

  1. Include the Jquery Framework 
    <script type="text/javascript" src="/path/to/jquery.js"></script>
  2. Add the awdropdown.js 
    <script type="text/javascript" src="/path/to/awselect.js"></script>
  3. .. and the awselect.css 
    <link href="/path/to/awdropdown.css" rel="stylesheet" />

Usage

  1. Create a standard HTML select as you would, with data-placeholder to give a placeholder text. 
    <select name="food_selector" data-placeholder="Select a food to eat">
	<option value="pancakes">Pancakes</option>
	...
</select>
  2. Initiate the plugin in your js file 
    $(document).ready(function(){ 
    
     $('select').awselect() 
    
});
Output

Customizing

You are allowed to change the way the dropdown look like based on your own taste. You can find the table explaining each options after the example output to be shown below.

  1. Add the desired options during the initialisation. 
    $(document).ready(function(){
     $('#myblue_dropdown').awselect({
	    background: "#0f37a9", //the dark blue background
		active_background:"rgb(149, 211, 255)", // the light blue background
		placeholder_color: "#97bce0", // the light blue placeholder color
		placeholder_active_color: "#0f37a9", // the dark blue placeholder color
		option_color:"#405463", // the option colors
		vertical_padding: "15px", //top and bottom padding
		horizontal_padding: "20px" // left and right padding
	});
});
Output
Option Value
background Sets the initial background of the dropdown
Default: #e5e5e5
active_background Sets the active background color when the dropdown is clicked
Default: #fff
placeholder_color The initial color of the placeholder text
Default: #000
placeholder_active_color The active color of the placeholder text when the dropdown is clicked
Default: #000
option_color Color of the option values
Default: #000
vertical_padding Vertical padding of the dropdown
Default: 15px
horizontal_padding Horizontal padding of the dropdown
Default: 40px

Callbacks

Additionally you may want to add callbacks to handle what happens when the user selects an option.

  1. Add the data-callback attribute followed by your callback function. 
    <select name="food_selector" data-callback="my_callback" data-placeholder="Select a food to eat" >
	...
  2. The callback function should be placed outside $(document).ready(). The function can also access the value that was chosen by the user. 
    $(document).ready(function(){
   ...
})

function my_callback(value){
	alert("The value selected is " + value)
}
Output