-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathjavascript.html
151 lines (130 loc) · 6.11 KB
/
javascript.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Style Guide</title>
<link rel="shortcut icon" href="static/brick.png" />
<!-- Styleguide CSS -->
<link rel="stylesheet" href="static/css/doc.css">
<link rel="stylesheet" href="static/css/github.css">
<!-- CSS to be documented -->
<link rel="stylesheet" href="build/css/screen.css">
<!-- Main libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<!-- component js and init scripts -->
<script src="build/script/components.js"></script>
</head>
<body>
<header class="header pbn" role="banner">
<div class="backgroundHighlight typeReversed1">
<div class="container">
<h1 class="h2 mvs">My Style Guide</h1>
</div>
</div>
<div class="backgroundLowlight typeReversed1">
<div class="container">
<span>
<ul class="docNav listInline">
<!-- Add you pages here -->
<li><a href="index.html">Intro</a></li>
<li><a href="base_css.html">Base CSS</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">Javascript</a></li>
</ul>
</span>
</div>
</div>
<!-- //header/container -->
</header>
<div class="content">
<section>
<div class="line">
<div class="col cols4">
<div class="componentMenu box boxBasic backgroundBasic">
<div class="boxBody pan">
<ul class="componentList listBorderedHover">
</ul>
</div>
</div>
</div>
<div class="main col cols20 lastCol">
<h1>Toggle</h1>
<p>Toggles should be used display show/hide comment. For example, showing/hiding a additional information on the search results page.
You can set the default as either active or inactive by specifying the class on the span to be either <code>toggleActive</code> or <code>toggleInactive</code>,
and setting (or not setting) the class <code>hideVisually</code> on the container that you are toggling.</p>
<p>Here's how you kick this off:</p>
<div class="codeExample"><div class="exampleOutput"><a href="#toggleArrow1" class="toggle toggleArrow " data-toggle-text="Fewer Options">More Options</a>
<div id="toggleArrow1" class="hideVisually">Yo, I got some content to show you. Lorem ipsum occaecat eiusmod Ut et sit sint quis qui labore in exercitation
esse. Lorem ipsum in aliquip esse anim aliquip ullamco sit dolor in deserunt eu labore. Lorem ipsum magna
officia in laborum fugiat proident cupidatat in ex aliquip velit officia nulla aliquip ut. Lorem ipsum
nostrud ad Ut nulla velit qui esse tempor Excepteur consectetur pariatur enim.
</div>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#toggleArrow1"</span> <span class="na">class=</span><span class="s">"toggle toggleArrow "</span> <span class="na">data-toggle-text=</span><span class="s">"Fewer Options"</span><span class="nt">></span>More Options<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"toggleArrow1"</span> <span class="na">class=</span><span class="s">"hideVisually"</span><span class="nt">></span>Yo, I got some content to show you. Lorem ipsum occaecat eiusmod Ut et sit sint quis qui labore in exercitation
esse. Lorem ipsum in aliquip esse anim aliquip ullamco sit dolor in deserunt eu labore. Lorem ipsum magna
officia in laborum fugiat proident cupidatat in ex aliquip velit officia nulla aliquip ut. Lorem ipsum
nostrud ad Ut nulla velit qui esse tempor Excepteur consectetur pariatur enim.
<span class="nt"></div></span>
</pre></div></div></div><script>$(document).ready(function () {
$('.toggle').truliaToggle();
});
</script>
<div class="codeBlock jsExample"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.toggle'</span><span class="p">).</span><span class="nx">truliaToggle</span><span class="p">();</span>
<span class="p">});</span>
</pre></div></div>
<p>Below are some methods you can also call on the toggle component and events you can listen to:</p>
<table><thead>
<tr>
<th>method</th>
<th>description</th>
</tr>
</thead><tbody>
<tr>
<td><code>toggle</code></td>
<td>Toggle the tooltip. Optional boolean argument to force active. Example: <code>$('.toggle').truliaToggle('toggle', true)</code></td>
</tr>
<tr>
<td><strong>events</strong></td>
<td></td>
</tr>
<tr>
<td><code>toggle</code></td>
<td>Listen to this event to perform an action when the toggle has changed state <code>$('.toggle').on('toggle', function (e, active) { if (active) console.log('I\m Active!') })</code></td>
</tr>
</tbody></table>
</div>
</div>
</section>
<footer>
The source code for this style guide is licensed under the MIT license.
</footer>
</div>
<script>
$(document).ready(function() {
// build simple sidebar navigation
var $headers = $('.main > h1');
var $componentList = $('.componentList');
$headers.each(function() {
var headerText = $(this).text();
$(this).attr('id', headerText);
$componentList.append(
'<li><a href="#' + headerText + '">' + headerText + '</a></li>'
);
});
// set the active tab
var currentHref = document.location.pathname.substr(1);
if (currentHref)
{
$('.docNav').find('a[href^="' + currentHref + '"]').addClass('activeNavElem typeEmphasize');
}
else
{
$('.docNav').find('a').eq(0).addClass('activeNavElem typeEmphasize');
}
});
</script>
</body>
</html>