hugh
/
awesome-select


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

	<link href="foundation.css" rel="stylesheet"/>
	<link href="scss/app.css" rel="stylesheet"/>
	<link href="scss/dropdown.css" rel="stylesheet"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="dropdown.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('select.light').dropdown()

			$('select.dark').dropdown({
				background: "#0f37a9",
				active_background:"rgb(149, 211, 255)",
				placeholder_color: "#97bce0",
				placeholder_active_color: "#0f37a9",
				option_color:"#405463",
				vertical_padding: "15px",
				horizontal_padding: "20px"
			})


		})
		
	</script>
</head>

<body>
	<div class="row">
	<div id = "content">
		<h2 class = "title">Awesome Dropdown <span class = "version">v0.0.1</span></h2>
		<div class = "divider">
		<select class="light" data-callback="hello" data-placeholder="Select an option">
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
		</div>
		<div class = "divider">
		<select class = "dark" id = "hello_dropdown" data-callback="hello" data-placeholder="Select an option">
			<option value="1">Hello</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
		<select class = "dark" data-callback="make" data-placeholder="Make an option">
			<option value="1">Hello</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
		</div>
		<div id = "documentation">
			<div class = "sections" id = "init">
				<h2>Installation</h2>
				<div class = "steps">
					<ol>
						<li>
							<span class = "step_name">Include the Jquery Framework</span>
							<code>
								&lt;script type="text/javascript" src="/path/to/jquery.js"&gt;&lt;/script&gt;
							</code>
						</li>
						<li>
							<span class = "step_name">Include awdropdown.js</span>
							<code>
								&lt;script type="text/javascript" src="/path/to/awdropdown.js"&gt;&lt;/script&gt;
							</code>
						</li>
						<li>
							<span class = "step_name">Include awdropdown.css</span>
							<code>
								&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;
							</code>
						</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</span>
							<code>
								&lt;select id = "my_dropdown"&gt; <br />
									&lt;option value = "option_1"&gt;Option 1&lt;/select&gt; <br />
									...<br />
								&lt;/select&gt;
							</code>
						</li>
						<li>
							<span class = "step_name">Include awdropdown.js</span>
							<code>
								&lt;script type="text/javascript" src="/path/to/awdropdown.js"&gt;&lt;/script&gt;
							</code>
						</li>
						<li>
							<span class = "step_name">Include awdropdown.css</span>
							<code>
								&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;
							</code>
						</li>
					</ol>
				</div>
			</div>	
			<div class = "sections"id = "options">
			<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: 20px</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>
	</div>
</body>