formstone
Version:
Library of modular front end components.
520 lines (494 loc) • 24.8 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Dropdown · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="dropdown-demo">Dropdown Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/dropdown">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_basic" class="form_label">Label</label>
<select name="demo_basic" id="demo_basic" class="js-dropdown">
<!-- <option data-label="Option One">One</option>
<option data-label="Option Two">Two</option> -->
<option value="1">One</option>
<option value="2">Two</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<style>
.custom_select {
max-width: 500px;
}
.custom_select .fs-dropdown-selected {
border-width: 2px;
}
.custom_select .fs-dropdown-options {
border-width: 0 2px 2px;
padding: 1%;
}
.custom_select .fs-dropdown-item {
border-radius: 3px ;
border: none;
margin: 0 0 1%;
}
.custom_select .fs-dropdown-item:last-child {
margin: 0;
}
</style>
<h4>Disabled</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_disabled" class="form_label">Label</label>
<select name="demo_disabled" id="demo_disabled" class="js-dropdown" disabled>
<!-- <option data-label="Option One">One</option>
<option data-label="Option Two">Two</option> -->
<option value="1">One</option>
<option value="2">Two</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown" disabled>
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<h4>Option Groups</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_groups" class="form_label">Label</label>
<select name="demo_groups" id="demo_groups" class="js-dropdown">
<optgroup label="Group One">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Group One">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</optgroup>
<optgroup label="Group Three">
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</optgroup>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<optgroup label="Group One">
		<option value="1">One</option>
		<option value="2">Two</option>
	</optgroup>
	<optgroup label="Group Two">
		<option value="3">Three</option>
		<option value="4">Fout</option>
	</optgroup>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<h4>Multiple</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_multiple" class="form_label">Label</label>
<select name="demo_multiple" id="demo_multiple" class="js-dropdown" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" disabled>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown" multiple>
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<h4>Cover</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_cover" class="form_label">Label</label>
<select name="demo_cover" id="demo_cover" class="js-dropdown" data-dropdown-options='{"cover":true}'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
cover: true
});</code></pre>
</div>
</div>
<h4>Native</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_native" class="form_label">Label</label>
<select name="demo_native" id="demo_native" class="js-dropdown" data-dropdown-options='{"native":true}'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
native: true
});</code></pre>
</div>
</div>
<h4>Default Label</h4>
<!-- START: FIRSTDEMO -->
<style>
.fs-dropdown {
max-width: 300px;
}
</style>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_label" class="form_label">Label</label>
<select name="demo_label" id="demo_label" class="js-dropdown" data-dropdown-options='{"label":"Select A State"}'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX"> Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
label: "Select an Item"
});</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Custom Labels</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_custom_1" class="form_label">Label</label>
<select name="demo_custom_1" id="demo_custom_1" class="js-dropdown" data-dropdown-options='{"customClass":"custom"}'>
<option value="1" data-label="Option One">One</option>
<option value="2" data-label="Option Two">Two</option>
<option value="3" data-label="Option Three">Three</option>
<option value="4" data-label="Option Four">Four</option>
<option value="5" data-label="Option Five">Five</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1" data-label="Option One">One</option>
	<option value="2" data-label="Option Two">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<h4>Custom HTML Labels</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_custom_2" class="form_label">Label</label>
<select name="demo_custom_2" id="demo_custom_2" class="js-dropdown" data-dropdown-options='{"customClass":"custom"}'>
<option value="1" data-label="<em>One </em>">One</option>
<option value="2" data-label="<em>Two </em>">Two</option>
<option value="3" data-label="<em>Three</em>">Three</option>
<option value="4" data-label="<em>Four </em>">Four</option>
<option value="5" data-label="<em>Five </em>">Five</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1" data-label=" &lt;em&gt;Option One &lt;/em&gt; ">One</option>
	<option value="2" data-label=" &lt;em&gt;Option Two &lt;/em&gt; ">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown();</code></pre>
</div>
</div>
<h4>Links</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_links" class="form_label">Label</label>
<select name="demo_links" id="demo_links" class="js-dropdown" data-dropdown-options='{"label":"Jump Sites","links":true}'>
<option value="http://google.com">Google Search</option>
<option value="http://boingboing.com">Boing Boing</option>
<option value="http://cnn.com">CNN News</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="http://example.com">Link One</option>
	<option value="http://example.com">Link Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
links: true
});</code></pre>
</div>
</div>
<h4>External Links</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_external" class="form_label">Label</label>
<select name="demo_external" id="demo_external" class="js-dropdown" data-dropdown-options='{"label":"Jump Sites","external":true}'>
<option value="http://google.com">Google Search</option>
<option value="http://boingboing.com">Boing Boing</option>
<option value="http://cnn.com">CNN News</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="http://example.com">Link One</option>
	<option value="http://example.com">Link Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
external: true
});</code></pre>
</div>
</div>
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<label for="demo_basic_2" class="form_label">Label</label>
<select name="demo_basic_2" id="demo_basic_2" class="js-dropdown" data-dropdown-options='{"theme":""}'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX"> Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</fieldset>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select></code></pre>
<pre><code class="language-javascript">$(".dropdown").dropdown({
theme: ""
});</code></pre>
</div>
</div>
<!--
<div class="fs-cell fs-sm-full fs-md-half fs-lg-half">
<h4>Detached Options</h4>
<fieldset class="form_fieldset">
<label for="demo_detached" class="form_label">Label</label>
<select name="demo_detached" id="demo_detached" class="js-dropdown" data-dropdown-options='{"detached":true}'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</fieldset>
</div>
-->
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>