소스 검색

Beautified docs

Previnash Wong 8 년 전
부모
커밋
8f5ce95e6b
1개의 변경된 파일246개의 추가작업 그리고 242개의 파일을 삭제
  1. 246 242
      docs/index.html

+ 246 - 242
docs/index.html

@@ -1,159 +1,165 @@
 <!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"/>
-	<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>
+    <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" />
+    <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()
 
-	<script type="text/javascript">
-		$(document).ready(function(){
+            $('select#hero_select').awselect({
+                vertical_padding: "10px"
+            })
 
-			$('select.normal').awselect()
+            $('#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"
+            })
+            $('#donate').on('click', function() {
+                $('#paypal_donate').submit()
+            })
 
-			$('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"
-			})
-			$('#donate').on('click', function(){
-				$('#paypal_donate').submit()
-			})
-			
-		})
-		function my_callback(value){
-			alert("The value selected is " + value)
-		}
-		
-	</script>
+        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 &lt;Select&gt; <span class = "version">v0.1.0 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;">
+    <div class="row">
+        <div id="content">
+            <header style="float:left;width:100%;">
+                <hgroup class="columns medium-8">
+                    <h2 class="title">Awesome &lt;Select&gt; <span class="version">v0.1.0 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">
+                    </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="selected" value = "beautiful">Beautiful</option>
 						<option value = "badass">Badass</option>
 						<option value = "awesome">Awesome</option>
 					</select>
-				</div>
-			</div>
+                    </div>
+                </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>
+            <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">&lt;script type="text/javascript" src="/path/to/jquery.js"&gt;&lt;/script&gt;</code></pre>
+                            <li>
+                                <span class="step_name">Include the Jquery Framework</span>
 
-						</li>
-						<li>
-							<span class = "step_name">Include awdropdown.js</span>
-							<pre><code class="language-html">&lt;script type="text/javascript" src="/path/to/awselect.js"&gt;&lt;/script&gt;</code></pre>
-						</li>
-						<li>
-							<span class = "step_name">Include awselect.css</span>
-							<pre><code class="language-html">&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;</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 data-placeholder to give a placeholder text. </span>				
-<pre><code class="language-html">&lt;select name="food_selector" data-placeholder="Select a food to eat"&gt;
+                                <pre><code class="language-html">&lt;script type="text/javascript" src="/path/to/jquery.js"&gt;&lt;/script&gt;</code></pre>
+
+                            </li>
+                            <li>
+                                <span class="step_name">Include awdropdown.js</span>
+                                <pre><code class="language-html">&lt;script type="text/javascript" src="/path/to/awselect.js"&gt;&lt;/script&gt;</code></pre>
+                            </li>
+                            <li>
+                                <span class="step_name">Include awselect.css</span>
+                                <pre><code class="language-html">&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;</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 data-placeholder to give a placeholder text. </span>
+                                <pre><code class="language-html">&lt;select name="food_selector" data-placeholder="Select a food to eat"&gt;
 	&lt;option value="pancakes"&gt;Pancakes&lt;/option&gt;
 	...
 &lt;/select&gt;</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 />
+
+                            </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-callback="hello" data-placeholder="Select an option">
+                            </li>
+                        </ol>
+                        <div class="output">
+                            <span>Output</span>
+                            <select class="normal" data-callback="hello" 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">
+                        </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(){
+                        <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
@@ -164,146 +170,144 @@
 		horizontal_padding: "20px" // left and right padding
 	});
 });</code></pre>
-						</li>
+                            </li>
 
-					</ol>
+                        </ol>
 
-					<div class = "output">
-						<span>Output</span>
-						<select id = "myblue_dropdown" data-placeholder="How do you get to work ?">
+                        <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>
+                        </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 clicked
-									<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 clicked
-									<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>
-						</tbody>
-					</table>
+                        <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 clicked
+                                        <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 clicked
+                                        <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>
+                            </tbody>
+                        </table>
 
-				</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">&lt;select name="food_selector" data-callback="my_callback" data-placeholder="Select a food to eat" &gt;
+                    </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">&lt;select name="food_selector" data-callback="my_callback" data-placeholder="Select a food to eat" &gt;
 	...</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(){
+                            </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 a food to eat">
+                            </li>
+
+                        </ol>
+                        <div class="output">
+                            <span>Output</span>
+                            <select class="normal" data-callback="my_callback" data-placeholder="Select a food 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>
+                    </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>
+    </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>
+    <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>
+    <script src="demo/js/prism.js"></script>
+</body>