|
|
@@ -0,0 +1,366 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
|
|
|
+ <title>AwesomeSelect - Beautiful dropdown with Material Animations</title>
|
|
|
+ <meta name="description" content="Beautiful dropdown with Material Animations" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+
|
|
|
+ <link href="demo/css/foundation.css" rel="stylesheet" />
|
|
|
+ <link href="demo/css/font-awesome.min.css" rel="stylesheet" />
|
|
|
+ <link href="scss/app.css" rel="stylesheet" />
|
|
|
+ <link rel="stylesheet" href="demo/css/prism.css">
|
|
|
+
|
|
|
+ <script type="text/javascript" src="demo/awselect/js/jquery.js"></script>
|
|
|
+ <link href="demo/awselect/css/awselect.css" rel="stylesheet" />
|
|
|
+ <script type="text/javascript" src="demo/awselect/js/awselect.min.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(document).ready(function() {
|
|
|
+
|
|
|
+ $('select.normal').awselect()
|
|
|
+
|
|
|
+ $('select#hero_select').awselect({
|
|
|
+ vertical_padding: "10px",
|
|
|
+ })
|
|
|
+
|
|
|
+ $('#myblue_dropdown').awselect({
|
|
|
+ background: "#0f37a9",
|
|
|
+ active_background: "rgb(149, 211, 255)",
|
|
|
+ placeholder_color: "#97bce0",
|
|
|
+ placeholder_active_color: "#0f37a9",
|
|
|
+ option_color: "#405463",
|
|
|
+ vertical_padding: "15px",
|
|
|
+ horizontal_padding: "20px"
|
|
|
+ })
|
|
|
+
|
|
|
+ $('#immersive_dropdown').awselect({
|
|
|
+ background: "#1d456f",
|
|
|
+ active_background: "rgb(135, 142, 144)",
|
|
|
+ placeholder_color: "rgb(169, 232, 169)",
|
|
|
+ placeholder_active_color: "rgb(169, 232, 169)",
|
|
|
+ option_color: "#fff",
|
|
|
+ vertical_padding: "15px",
|
|
|
+ horizontal_padding: "20px",
|
|
|
+ immersive: true
|
|
|
+ })
|
|
|
+ $('#donate').on('click', function() {
|
|
|
+ $('#paypal_donate').submit()
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ function my_callback(value) {
|
|
|
+ alert("The value selected is " + value)
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="row">
|
|
|
+ <div id="content">
|
|
|
+ <header style="float:left;width:100%;">
|
|
|
+ <hgroup class="columns medium-8">
|
|
|
+ <h2 class="title">Awesome <Select> <span class="version">v0.1.1 beta</span></h2>
|
|
|
+ <p>Because the standard select is too f*kng ugly</p>
|
|
|
+ </hgroup>
|
|
|
+ <hgroup class="columns medium-4">
|
|
|
+ <span class="author">_Developed by<br /> Prev Wong</span>
|
|
|
+ <ul class="social">
|
|
|
+ <li><a target="_blank" href="https://twitter.com/prev_wong/"><i class = "fa fa-twitter"></i></a>
|
|
|
+ <li><a target="_blank" href="https://github.com/prevwong/"><i class = "fa fa-github"></i></a>
|
|
|
+ <li><a target="_blank" href="https://www.imprev.co/"><i class = "fa fa-user-circle-o"></i></a>
|
|
|
+ </ul>
|
|
|
+ </hgroup>
|
|
|
+ </header>
|
|
|
+ <div id="hero">
|
|
|
+ <div class="columns medium-12 content">
|
|
|
+ <div style="padding:0" class="columns medium-5">
|
|
|
+ <select style="margin-top:2px;">
|
|
|
+ <option value = "ew">From ugly</option>
|
|
|
+ <option value = "what">What</option>
|
|
|
+ <option value = "even">Even</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="columns medium-2">
|
|
|
+ <span class="to">to</span>
|
|
|
+ </div>
|
|
|
+ <div style="padding:0" class="float-right columns medium-5">
|
|
|
+ <select data-placeholder="Select an Option" id="hero_select">
|
|
|
+ <option selected value = "beautiful">Beautiful</option>
|
|
|
+ <option value = "badass">Badass</option>
|
|
|
+ <option value = "awesome">Awesome</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="columns medium-12" id="documentation">
|
|
|
+ <div class="sections" id="actions">
|
|
|
+ <div style="padding-left:0;" class="columns medium-8 float-left">
|
|
|
+ <a target="_blank" href="https://github.com/prevwong/awesome-select/" class="button">
|
|
|
+ <div class="bg"></div>
|
|
|
+ <div class="content">Grab the source!</div> <i class="icon fa fa-github"></i></a>
|
|
|
+ </div>
|
|
|
+ <div style="padding-right:0" class="columns medium-4 float-left">
|
|
|
+ <a id="donate" class="coffee button">
|
|
|
+ <div class="bg"></div>
|
|
|
+ <div class="content">Buy me coffee</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sections" id="init">
|
|
|
+ <h2>Installation</h2>
|
|
|
+ <div class="steps">
|
|
|
+ <ol>
|
|
|
+
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Include the Jquery Framework</span>
|
|
|
+
|
|
|
+ <pre><code class="language-html"><script type="text/javascript" src="/path/to/jquery.js"></script></code></pre>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Add the awdropdown.js</span>
|
|
|
+ <pre><code class="language-html"><script type="text/javascript" src="/path/to/awselect.js"></script></code></pre>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">.. and the awselect.css</span>
|
|
|
+ <pre><code class="language-html"><link href="/path/to/awdropdown.css" rel="stylesheet" /></code></pre>
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sections" id="init">
|
|
|
+ <h2>Usage</h2>
|
|
|
+ <div class="steps">
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Create a standard HTML select as you would, with <span class="code">data-placeholder</span> to give a placeholder text. </span>
|
|
|
+ <pre><code class="language-html"><select name="food_selector" data-placeholder="Select a food to eat">
|
|
|
+ <option value="pancakes">Pancakes</option>
|
|
|
+ ...
|
|
|
+</select></code></pre>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Initiate the plugin in your js file</span>
|
|
|
+ <pre><code class="language-javascript">$(document).ready(function(){ <br />
|
|
|
+ $('select').awselect() <br />
|
|
|
+});</code></pre>
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+ <div class="output">
|
|
|
+ <span>Output</span>
|
|
|
+ <select class="normal" data-placeholder="Select an option">
|
|
|
+ <option value="pancakes">Pancakes</option>
|
|
|
+ <option value="tosai">Tosai</option>
|
|
|
+ <option value="roti">Roti Canai</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sections" id="init">
|
|
|
+ <h2>Customizing</h2>
|
|
|
+ <p>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.</p>
|
|
|
+ <div class="steps">
|
|
|
+
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Add the desired options during the initialisation.</span>
|
|
|
+ <pre><code class="language-javascript">$(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,
|
|
|
+ fullscreen: false // fullscreen option, demonstrated at the next example
|
|
|
+ });
|
|
|
+});</code></pre>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <div class="output">
|
|
|
+ <span>Output</span>
|
|
|
+ <select id="myblue_dropdown" data-placeholder="How do you get to work ?">
|
|
|
+ <option value="1">Car</option>
|
|
|
+ <option value="2">Truck</option>
|
|
|
+ <option value="3">Unicorn</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="width:180px;">Option</th>
|
|
|
+ <th>Value</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>background</td>
|
|
|
+ <td>
|
|
|
+ Sets the initial background of the dropdown
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: #e5e5e5</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>active_background</td>
|
|
|
+ <td>
|
|
|
+ Sets the active background color when the dropdown is opened
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: #fff</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>placeholder_color</td>
|
|
|
+ <td>
|
|
|
+ The initial color of the placeholder text
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: #000</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>placeholder_active_color</td>
|
|
|
+ <td>
|
|
|
+ The active color of the placeholder text when the dropdown is opened
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: #000</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>option_color</td>
|
|
|
+ <td>
|
|
|
+ Color of the option values
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: #000</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>vertical_padding</td>
|
|
|
+ <td>
|
|
|
+ Vertical padding of the dropdown
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: 15px</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>horizontal_padding</td>
|
|
|
+ <td>
|
|
|
+ Horizontal padding of the dropdown
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: 40px</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>immersive</td>
|
|
|
+ <td>
|
|
|
+ Immersive mode
|
|
|
+ <div class="code">
|
|
|
+ <span>Default: false</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sections" id="init">
|
|
|
+ <h2>Immersive Mode</h2>
|
|
|
+ <p>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 <span class='code'>immersive</span> option</p>
|
|
|
+ <div class="steps">
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Set the <span class = "code">immersive</span> option to true</span>
|
|
|
+ <pre><code class="language-javascript">$(document).ready(function(){
|
|
|
+ $('#immersive_dropdown').awselect({
|
|
|
+ ...
|
|
|
+ immersive: true // add this option
|
|
|
+ });
|
|
|
+});</code></pre>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ol>
|
|
|
+ <div class="output">
|
|
|
+ <span>Output</span>
|
|
|
+ <select id="immersive_dropdown" data-placeholder="Dramatic Dropdown">
|
|
|
+ <option value="dramatic">Dramatic</option>
|
|
|
+ <option value="very_dramatic">Very Dramatic</option>
|
|
|
+ <option value="out_world">Out of this world</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <p class = "note">** 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 <span class = "code">false</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sections" id="init">
|
|
|
+ <h2>Callbacks</h2>
|
|
|
+ <p>Additionally you may want to add callbacks to handle what happens when the user selects an option.</p>
|
|
|
+ <div class="steps">
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">Add the <span class = "code">data-callback</span> attribute followed by your callback function.</span>
|
|
|
+ <pre><code class="language-html"><select name="food_selector" data-callback="my_callback" data-placeholder="Select a food to eat" >
|
|
|
+ ...</code></pre>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="step_name">The callback function should be placed outside <span class = "code">$(document).ready()</span>. The function can also access the <span class="code">value</span> that was chosen by the user.</span>
|
|
|
+ <pre><code class="language-javascript">$(document).ready(function(){
|
|
|
+ ...
|
|
|
+})
|
|
|
+
|
|
|
+function my_callback(value){
|
|
|
+ alert("The value selected is " + value)
|
|
|
+}</code></pre>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ol>
|
|
|
+ <div class="output">
|
|
|
+ <span>Output</span>
|
|
|
+ <select class="normal" data-callback="my_callback" data-placeholder="Select something to eat">
|
|
|
+ <option value="pancakes">Pancakes</option>
|
|
|
+ <option value="tosai">Tosai</option>
|
|
|
+ <option value="roti_canai">Roti Canai</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <footer class="columns medium-12">
|
|
|
+ <p>
|
|
|
+ Made with <i style="color:#7ed3ff;" class="fa fa-heart"></i> in Kuala Lumpur, Malaysia <br /> Special thanks to Prism, Zurb, Entypo, FontAwesome <br /> All Rights Reserved.
|
|
|
+ </p>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <form style="display:none" id="paypal_donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
|
|
+ <input type="hidden" name="cmd" value="_s-xclick">
|
|
|
+ <input type="hidden" name="hosted_button_id" value="T3M9D29DRF9Y6">
|
|
|
+ <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
|
|
+ <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <script src="demo/js/prism.js"></script>
|
|
|
+</body>
|
Prev Wong