Awesome <Select> v0.1.2

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,
        immersive: false // immersive option, demonstrated at the next example
	});
});
Output
Option Value
background Sets the initial background of the dropdown
Default: #e5e5e5
active_background Sets the active background color when the dropdown is opened
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 opened
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
immersive Immersive mode
Default: false

Immersive Mode

Perhaps you may want to make your dropdown more immersive for your users. If that's the case, then you might want to checkout the immersive option

  1. Set the immersive option to true 
    $(document).ready(function(){
     $('#immersive_dropdown').awselect({
        ...
        immersive: true // add this option
    });
});
Output

** As of this update, the immersive animation will automatically be used if the display is below 800px (mobile devices) regardless if the option value is false

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