formstone
Version:
Library of modular front end components.
212 lines (202 loc) • 11.7 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>Checkbox · 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="checkbox-demo">Checkbox Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/checkbox">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<div class="demo_container">
<div class="demo_example">
<div class="fs-row">
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="checkbox" value="1" id="checkbox-1" name="checkbox-1" checked>
<label for="checkbox-1">One</label>
</fieldset>
<fieldset class="form_fieldset">
<label for="checkbox-2">
<input type="checkbox" value="2" id="checkbox-2" name="checkbox-2"> Two
</label>
</fieldset>
<fieldset class="form_fieldset">
<input type="checkbox" value="3" id="checkbox-3" name="checkbox-3" disabled>
<label for="checkbox-3">Three</label>
</fieldset>
<fieldset class="form_fieldset">
<label>
<span>
<input type="checkbox" value="4" id="checkbox-4" name="checkbox-4"> Four
</span>
</label>
</fieldset>
</form>
</div>
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="radio" value="1" id="radio-1" name="radio-group" checked>
<label for="radio-1">One</label>
</fieldset>
<fieldset class="form_fieldset">
<label for="radio-2">
<input type="radio" value="2" id="radio-2" name="radio-group"> Two
</label>
</fieldset>
<fieldset class="form_fieldset">
<input type="radio" value="3" id="radio-3" name="radio-group" disabled>
<label for="radio-3">Three</label>
</fieldset>
<fieldset class="form_fieldset">
<label>
<span>
<input type="radio" value="4" id="radio-4" name="radio-group"> Four!
</span>
</label>
</fieldset>
</form>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><input type="checkbox" value="1" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label>
<input type="radio" value="1" id="radio" name="radio">
<label for="radio">Radio</label></code></pre>
<pre><code class="language-javascript">$("input[type='checkbox'], input[type='radio']").checkbox();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Toggle</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row">
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="checkbox" value="One" id="toggle-1" name="toggle-1" checked data-checkbox-options='{"toggle":true}'>
<label for="toggle-1">One</label>
</fieldset>
</form>
</div>
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="checkbox" value="Two" id="toggle-2" name="toggle-2" disabled data-checkbox-options='{"toggle":true}'>
<label for="toggle-2">Two</label>
</fieldset>
</form>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><input type="checkbox" value="1" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label></code></pre>
<pre><code class="language-javascript">$("input[type='checkbox']").checkbox({
toggle: true
});</code></pre>
</div>
</div>
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row">
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="checkbox" value="1" id="checkbox-plain-1" name="checkbox-plain-1" checked data-checkbox-options='{"theme":""}'>
<label for="checkbox-plain-1">One</label>
</fieldset>
<fieldset class="form_fieldset">
<label for="checkbox-plain-2">
<input type="checkbox" value="2" id="checkbox-plain-2" name="checkbox-plain-2" data-checkbox-options='{"theme":""}'> Two
</label>
</fieldset>
<fieldset class="form_fieldset">
<input type="checkbox" value="3" id="checkbox-plain-3" name="checkbox-plain-3" disabled data-checkbox-options='{"theme":""}'>
<label for="checkbox-plain-3">Three</label>
</fieldset>
<fieldset class="form_fieldset">
<label>
<span>
<input type="checkbox" value="4" id="checkbox-plain-4" name="checkbox-plain-4" data-checkbox-options='{"theme":""}'> Four
</span>
</label>
</fieldset>
</form>
</div>
<div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset">
<input type="radio" value="1" id="radio-plain-1" name="radio-plain-group" checked data-checkbox-options='{"theme":""}'>
<label for="radio-plain-1">One</label>
</fieldset>
<fieldset class="form_fieldset">
<label for="radio-plain-2">
<input type="radio" value="2" id="radio-plain-2" name="radio-plain-group" data-checkbox-options='{"theme":""}'> Two
</label>
</fieldset>
<fieldset class="form_fieldset">
<input type="radio" value="3" id="radio-plain-3" name="radio-plain-group" disabled data-checkbox-options='{"theme":""}'>
<label for="radio-plain-3">Three</label>
</fieldset>
<fieldset class="form_fieldset">
<label>
<span>
<input type="radio" value="4" id="radio-plain-4" name="radio-plain-group" data-checkbox-options='{"theme":""}'> Four!
</span>
</label>
</fieldset>
</form>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><input type="checkbox" value="1" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label>
<input type="radio" value="1" id="radio" name="radio">
<label for="radio">Radio</label></code></pre>
<pre><code class="language-javascript">$("input[type='checkbox'], input[type='radio']").checkbox({
theme: ""
});</code></pre>
</div>
</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>