Awesome <Select> v0.1.2
Because the standard select is too f*kng ugly
Installation
-
Include the Jquery Framework
<script type="text/javascript" src="/path/to/jquery.js"></script>
-
Add the awdropdown.js
<script type="text/javascript" src="/path/to/awselect.js"></script>
-
.. and the awselect.css
<link href="/path/to/awdropdown.css" rel="stylesheet" />
Usage
-
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>
-
Initiate the plugin in your js file
$(document).ready(function(){ $('select').awselect() });
Output
Select an option
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.
-
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 }); });
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
-
Set the immersive option to true
$(document).ready(function(){ $('#immersive_dropdown').awselect({ ... immersive: true // add this option }); });
Output
Dramatic Dropdown
** 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.
-
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" > ...
-
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
Select something to eat