formstone
Version:
Library of modular front end components.
184 lines (175 loc) • 10.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>Tabs · 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="tabs-demo">Tabs Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/tabs">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.tabs {
overflow: hidden;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div role="tablist">
<nav class="tabs">
<a href="#tab-1-1" class="tab js-tabs" data-tabs-group="tab-1">One</a>
<a href="#tab-1-2" class="tab js-tabs" data-tabs-group="tab-1" data-tabs-active="true">Two</a>
<a href="#tab-1-3" class="tab js-tabs" data-tabs-group="tab-1">Three</a>
</nav>
<div class="tab_content" id="tab-1-1">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="tab_content" id="tab-1-2">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque
nisl consectetur et.</p>
</div>
<div class="tab_content" id="tab-1-3">
<p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".tabs").tabs();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Mobile Max Width</h4>
<div class="demo_container">
<div class="demo_example">
<div role="tablist">
<nav class="tabs">
<a href="#tab-2-1" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>One</a>
<a href="#tab-2-2" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>Two</a>
<a href="#tab-2-3" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>Three</a>
</nav>
<div class="tab_content" id="tab-2-1">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="tab_content" id="tab-2-2">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque
nisl consectetur et.</p>
</div>
<div class="tab_content" id="tab-2-3">
<p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".tabs").tabs({
mobileMaxWidth: 500
});</code></pre>
</div>
</div>
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<div role="tablist">
<nav class="tabs">
<a href="#tab-3-1" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>One</a>
<a href="#tab-3-2" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>Two</a>
<a href="#tab-3-3" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>Three</a>
</nav>
<div class="tab_content" id="tab-3-1">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="tab_content" id="tab-3-2">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque
nisl consectetur et.</p>
</div>
<div class="tab_content" id="tab-3-3">
<p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".tabs").tabs({
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>