formstone
Version:
Library of modular front end components.
183 lines (160 loc) • 9.6 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>Swap · 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="swap-demo">Swap Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/swap">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.demo_content .toggle {
cursor: pointer;
display: none;
margin: 10px 0;
}
.demo_content .toggle.fs-swap-enabled {
display: block;
}
.toggle,
.no-touch .toggle:hover {
background: #B0BEC5;
}
.toggle.fs-swap-active,
.no-touch .toggle.fs-swap-active:hover {
background: #00bcd4;
}
.toggle_target {
background: #00bcd4;
border-radius: 3px;
color: #fff;
height: 75px;
line-height: 75px;
margin: 10px 0;
text-align: center;
width: 100%;
}
.toggle_target.fs-swap-enabled.fs-swap-target {
display: none;
}
.toggle_target.fs-swap-enabled.fs-swap-active {
display: block;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="button toggle js-swap" data-swap-target=".toggle_target_0">Handle</div>
<div class="toggle_target toggle_target_0">Content</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><h2 class="swap" data-swap-target=".swap_target">Handle</h2>
<div class="swap_target">Content</div></code></pre>
<pre><code class="language-javascript">$(".swap").swap();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Grouped</h4>
<div class="demo_container">
<div class="demo_example">
<div class="button toggle js-swap" data-swap-target=".toggle_target_1" data-swap-group="toggle_group_1">Handle 1</div>
<div class="toggle_target toggle_target_1">Content 1</div>
<div class="button toggle js-swap" data-swap-target=".toggle_target_2" data-swap-group="toggle_group_1">Handle 2</div>
<div class="toggle_target toggle_target_2">Content 2</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>
<div class="swap_target_1">Content 1</div>
<h2 class="swap" data-swap-target=".toggle_target_2" data-swap-group="swap_group">Handle 2</h2>
<div class="swap_target_2">Content 2</div></code></pre>
<pre><code class="language-javascript">$(".swap").swap();</code></pre>
</div>
</div>
<h4>Grouped (no collapse)</h4>
<div class="demo_container">
<div class="demo_example">
<div class="button toggle js-swap" data-swap-options='{"collapse":false}' data-swap-target=".toggle_target_3" data-swap-group="toggle_group_2">Handle 1</div>
<div class="toggle_target toggle_target_3">Content 1</div>
<div class="button toggle js-swap" data-swap-options='{"collapse":false}' data-swap-target=".toggle_target_4" data-swap-group="toggle_group_2" data-swap-active="true">Handle 2</div>
<div class="toggle_target toggle_target_4">Content 2</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>
<div class="swap_target_1">Content 1</div>
<h2 class="swap" data-swap-target=".swap_target_2" data-swap-group="swap_group" data-swap-active="true">Handle 2</h2>
<div class="swap_target_2">Content 2</div></code></pre>
<pre><code class="language-javascript">$(".swap").swap({
collapse: false
});</code></pre>
</div>
</div>
<h4>Max Width</h4>
<div class="demo_container">
<div class="demo_example">
<div class="button toggle js-swap" data-swap-options='{"maxWidth":"740px"}' data-swap-target=".toggle_target_5">Handle</div>
<div class="toggle_target toggle_target_5">Content</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><h2 class="swap" data-swap-target=".swap_target">Handle</h2>
<div class="swap_target">Content</div></code></pre>
<pre><code class="language-javascript">$(".swap").swap({
maxWidth: "740px"
});</code></pre>
</div>
</div>
<h4>Linked Handles</h4>
<div class="demo_container">
<div class="demo_example">
<div class="button toggle js-swap" data-swap-target=".toggle_target_6" data-swap-linked="toggle_linked" data-swap-group="toggle_group_3">Handle 1 - Group 1</div>
<div class="toggle_target toggle_target_6">Content</div>
<div class="button toggle js-swap" data-swap-target=".toggle_target_6" data-swap-linked="toggle_linked" data-swap-group="toggle_group_3">Handle 2 - Group 1</div>
<div class="button toggle js-swap" data-swap-target=".toggle_target_7" data-swap-linked="toggle_linked_2" data-swap-group="toggle_group_3">Handle 1 - Group 2</div>
<div class="toggle_target toggle_target_7">Content 2</div>
<div class="button toggle js-swap" data-swap-target=".toggle_target_7" data-swap-linked="toggle_linked_2" data-swap-group="toggle_group_3">Handle 2 - Group 2</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 1 - Group 1</h2>
<div class="swap_target_1">Content</div>
<span class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 2 - Group 1</span>
<h2 class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 1 - Group 2</h2>
<div class="swap_target_2">Content 2</div>
<span class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 2 - Group 2</span></code></pre>
<pre><code class="language-javascript">$(".swap").swap();</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>