-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
executable file
·108 lines (67 loc) · 5.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
layout: default
---
<h2>Overview<a href="#menu-overview" name="menu-overview"> <small><i class="fa fa-link"></i></small></a></h2>
<p>This is a simple JavaScript plugin for a hashchange-driven tabbed content switcher. Personally I'm not a tabsphiliac, but I needed those a few times recently and decided to make a semi-universal solution.</p>
<p><a href="https://github.com/magicznyleszek/hashtabber" class="fake-button fake-button-big">View on GitHub <i class="fa fa-fw fa-github"></i></a></p>
<p><a href="https://github.com/magicznyleszek/hashtabber/archive/v2.2.zip" class="fake-button fake-button-big">Download v2.2 <i class="fa fa-fw fa-download"></i></a></p>
<p>Quick run-down of features:</p>
<ul>
<li>Vanilla JavaScript</li>
<li>SCSS stylesheet</li>
<li>Switching tabs with <code>#foo=bar</code> links</li>
<li>Multiple simultaneous HashTabbers</li>
<li>Flexible <code>-nav</code> & <code>-data</code> structure</li>
<li>
Tested and working on those browsers:
<ul>
<li>Chrome 4+ (iOS 33+)</li>
<li>Firefox 4+</li>
<li>Opera 12+</li>
<li>Safari 5+ (iOS 7+)</li>
<li>IE 8+</li>
</ul>
</li>
</ul>
<h2>Getting started<a href="#menu-getting-started" name="menu-getting-started"> <small><i class="fa fa-link"></i></small></a></h2>
<p>You will need those two files:</p>
<ul>
<li><code>hashTabber.js</code> – with a single object inside and four helper functions; so you could as well just paste it to your script.js to avoid an unnecessary HTML request</li>
<li><code>_hashTabber.scss</code> – 20-something lines of code that would be best to just @include in your global.scss</li>
</ul>
<p>Build a html HashTabber section with this basic setup:</p>
<pre><code lang="html">{% include examples/hashTabber-example-code-html.liquid %}</code></pre>
<p>Important things for the whole thing to work are:</p>
<ul>
<li><strong>data attribute</strong> – the script will be pairing <code>ol.hashTabber-nav</code> and <code>ol.hashTabber-data</code> elements that share the <code>data-hashtabber-id</code> attribute value, and will use it to generate links for tabs</li>
<li><strong>children</strong> – the script assumes that <code>ol.hashTabber-nav</code> and <code>ol.hashTabber-data</code> both have immediate child nodes <code>li</code>, and pairs up two of them with the same index or a special <a href="#menu-options">pair-name</a> attribute</li>
<li><strong>links</strong> – every navigation list element <code>ol.hashTabber-nav > li</code> needs to have an immediate child node <code>a</code> for <code>#foo=tab</code> hrefs creation</li>
</ul>
<p>Then just run the damn thing:</p>
<pre><code lang="javascript">{% include examples/hashTabber-example-code-js-run.liquid %}</code></pre>
<p>If the content changes after HashTabber was triggered, you can just use the <code>.run()</code> method again.</p>
<h2>Options<a href="#menu-options" name="menu-options"> <small><i class="fa fa-link"></i></small></a></h2>
<p>For some special situations you can define any of the options for classes and data attributes names through the <code>hashTabber()</code> <code>options</code> object parameter:</p>
<pre><code lang="javascript">{% include examples/hashTabber-example-code-js-options.liquid %}</code></pre>
<p>You can define some special options through the HTML data attributes:</p>
<ul>
<li><code>data-hashtabber-default</code> – defined for <code>ol.hashTabber-nav</code> changes the default tab from 0 to given value (a number or a pair-name)</li>
<li><code>data-hashtabber-pair</code> – defined for two <code>li</code>s from both <code>ol</code>s gives them a special <code>#foo=name</code> link instead of a standard numerical one</li>
</ul>
<h3>Hidden features</h3>
<p>It's also worth to mention, that:</p>
<ul>
<li>Both <code>ol</code>s could contain countless different nodes (<code>h2</code> for example), as the script takes into account only <code>li</code>s inside of them</li>
<li>Both <code>ol</code>s could be placed within completely diffrent HTML nodes, as the script uses the <code>data-hashtabber-id</code> attribute to pair them</li>
<li>You can chain parameters in links: <code>#foo=2&bar=1&fum=baz&qux=2&zot=3</code>, to switch tabs for all instances of HashTabber simultaneously</li>
</ul>
<h2>Themes<a href="#menu-themes" name="menu-themes"> <small><i class="fa fa-link"></i></small></a></h2>
<p>This is something rather varied, but with theming, I would personally go with an additional <code>hashTabber-themename</code> class for both <code>ol</code>s. This blank example could be a good start:</p>
<pre><code lang="scss">{% include examples/hashTabber-example-theme-blank.liquid %}</code></pre>
<h2>Examples<a href="#menu-examples" name="menu-examples"> <small><i class="fa fa-link"></i></small></a></h2>
<p>Below is an example with basic theming applied. Notice that you could use an outside <a href="#dinosaurs=velociraptor">#dinosaurs=velociraptor</a> link to change the tab.</p>
<section class="example">{% include examples/hashTabber-example-sandstone.liquid %}</section>
<p>This is a naked (unthemed) script in work:</p>
<section class="example">{% include examples/hashTabber-example-naked.liquid %}</section>
<h2>License<a href="#menu-license" name="menu-license"> <small><i class="fa fa-link"></i></small></a></h2>
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a> (it's public domain)</p>