@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
169 lines (156 loc) • 5.32 kB
HTML
<html>
<head>
<title>Navigation demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
</head>
<body>
<header>
<h2>Navigation demos</h2>
</header>
<section>
<header>
<h3>Example 1</h3>
</header>
<ul class="pat-navigation">
<li>
<a
href="#inject-tab-1"
class="pat-inject"
data-pat-inject="target: #content-tab-1"
>Tab 1</a
>
<ul>
<li>
<a
href="#inject-tab-1-1"
class="pat-inject"
data-pat-inject="target: #content-tab-1"
>Link 1.1</a
>
</li>
<li>
<a
href="#inject-tab-1-2"
class="pat-inject"
data-pat-inject="target: #content-tab-1"
>Link 1.2</a
>
</li>
</ul>
</li>
<li>
<a
href="#inject-tab-2"
class="pat-inject"
data-pat-inject="target: #content-tab-1"
>Tab 2</a
>
</li>
</ul>
<div id="content-tab-1">Example 1 Content will appear here</div>
</section>
<section>
<header>
<h3>Example 2</h3>
</header>
<nav
class="pat-navigation example2 navigation-load-current"
data-pat-navigation="item-wrapper: div; in-path-class: in-path; current-class: active"
>
<div>
<a
href="#inject-tab-1"
class="pat-inject"
data-pat-inject="target: #content-tab-2"
>Tab 1
</a>
<div>
<a
href="#inject-tab-1-1"
class="pat-inject active"
data-pat-inject="target: #content-tab-2"
>Link 1.1
</a>
</div>
</div>
<div>
<a
href="#inject-tab-2"
class="pat-inject"
data-pat-inject="target: #content-tab-2"
>Tab 2
</a>
</div>
</nav>
<div id="content-tab-2">Example 2 Content will appear here</div>
</section>
<section>
<header>
<h3>Example 3 - nested nav, but no injection</h3>
</header>
<ul class="pat-navigation">
<li>
<a href="#10">Tab 1</a>
<ul>
<li>
<a href="#11">Link 1.1</a>
</li>
<li>
<a href="#12">Link 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#2">Tab 2</a>
</li>
</ul>
<section id="10">Content for tab 1</section>
<section id="11">Content for tab 1.1</section>
<section id="12">Content for tab 1.2</section>
<section id="2">Content for tab 2</section>
</section>
<template id="inject-tab-1">Content for tab 1</template>
<template id="inject-tab-2">Content for tab 2</template>
<template id="inject-tab-1-1">Content for tab 1.1</template>
<template id="inject-tab-1-2">Content for tab 1.2</template>
<style>
/* example 1 styles */
a.current {
color: white;
background: green;
}
.navigation-in-path > a {
color: white;
background: blue;
}
/* example 2 styles */
a.active {
color: blue;
background: red;
}
.in-path,
.in-path > a {
color: yellow;
background: grey;
}
.example2 div div {
margin-left: 1em;
}
.pat-navigation {
display: inline-block;
width: 10em;
vertical-align: top;
}
#content-tab-1,
#content-tab-2 {
font-weight: bold;
font-size: 2em;
display: inline-block;
vertical-align: top;
}
</style>
</body>
</html>