forked from tardate/jtab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.htm
187 lines (155 loc) · 6.21 KB
/
examples.htm
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jTab - Guitar Chord and Tab Library Examples</title>
<meta name="description" content="jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web"/>
<meta name="keywords" content="guitar,chord,tab,tabulature,music,notation,javascript,css,svg,html,xhtml"/>
<link type="text/css" rel="stylesheet" href="css/jtab-site.css"/>
<!-- START: for jtab -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link type="text/css" rel="stylesheet" href="css/jtab-helper.css"/>
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/raphael.js" type="text/javascript"></script>
<script src="javascripts/jtab.js" type="text/javascript"></script>
<!-- END: for jtab -->
</head>
<body>
<div id="header">
<h1>jTab - Guitar Chord and Tab Notation for the Web</h1>
<p>
jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab)
notation on the web. Automatically. It works in most modern browsers that support javascript, CSS and scalable vector graphics (SVG) -
for example, Internet Explorer 7+ and Firefox 3+.
</p>
</div>
<div id="menu">
<ul>
<li><a href="index.htm#">About jTab</a></li>
<li>Live Examples</li>
<li><a href="index.htm#notation">Notation Reference</a></li>
<li><a href="index.htm#download">Download</a></li>
<li><a href="index.htm#install">How To Install</a></li>
<li><a href="index.htm#help">Troubleshooting and Tips</a></li>
<li><a href="index.htm#feedback">Feedback & Contribute</a></li>
<li><a href="index.htm#limitations">Limitations</a></li>
<li><a href="index.htm#browsers">Browser Support</a></li>
<li><a href="index.htm#inthewild">jTab in the Wild</a></li>
</ul>
</div>
<div id="content">
<h2>Live Examples</h2>
<p>
Show don't tell! This page is a bit of a sandbox demonstrating the things you can do with jTab.
</p>
<h3>Render notation provided by a user</h3>
<p>
</p>
<span>Try it out. Enter a phrase here (see <a href="index.htm#notation">notation</a> for help):</span>
<input id="notation" size="40">
<input type="button" value="jTab this!" onclick="jtab.render('tab',$(#'notation').value);">
<div id="tab"><i>jTab will render your phrase here</i></div>
<script type='text/javascript'>
$('#notation').keyup(function(e){
jtab.render($('#tab'),$(this).val());
});
</script>
<h3>Implicitly render a chord-only phrase</h3>
<p>Note that the "chordonly" class is optional (it just pre-adjusts display size to reduce screen jitter).
</p>
<pre>
<div class="jtab chordonly"> E / / / | A7 / B7 / || </div>
</pre>
<div class="jtab chordonly"> E / / / | A7 / B7 / || </div>
<h3>Implicitly render a custom named chord</h3>
<pre>
<div class="jtab chordonly"> %7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5] </div>
</pre>
<div class="jtab chordonly">%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]</div>
<h3>Implicitly render a tab-only phrase</h3>
<p>Note that the "tabonly" class is optional (it just pre-adjusts display size to reduce screen jitter).
</p>
<pre>
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
</pre>
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
<h3>Implicitly render a mixed chord and tab phrase</h3>
<p>
</p>
<pre>
<div class="jtab">Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 ||</div>
</pre>
<div class="jtab">Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 ||</div>
<h3>A simple three note sequence on the B (2nd) string</h3>
<p>
</p>
<pre>
<div class="jtab tabonly">$B 0 1 3 | $2 5 3 0 ||</div>
</pre>
<div class="jtab tabonly">$2 0 1 3 | $B 5 3 0 ||</div>
<h3>A sequence of notes across two strings</h3>
<p>Demonstrates using both 654321 and EADGBe for string numbering..
</p>
<pre>
<div class="jtab tabonly">$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||</div>
</pre>
<div class="jtab tabonly">$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||</div>
<h3>More than one note at a time in tab</h3>
<p>
</p>
<pre>
<div class="jtab tabonly">$3.6.$2.5h7 $1 5 $2 7 |</div>
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
</pre>
<div class="jtab tabonly">$3.6.$2.5h7 $1 5 $2 7 |</div>
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>
<h3>Shorthand tab notation for all strings</h3>
<p>Tab for a whole or partial chord can be easier to enter as a full six-string block.
Periods are required when you go above the 9th fret, and use X or x to indicate an unused string.
</p>
<pre>
<div class="jtab tabonly">022100 / / / X02220 / 8.10.10.9.8.8 / ||</div>
</pre>
<div class="jtab tabonly">022100 / / / X02220 / 8.10.10.9.8.8 / ||</div>
<h3>Scripted rendering</h3>
<p>
</p>
<pre>
<div id="mytab"></div>
<script type="text/javascript">
jtab.render($('#mytab'),'Am7 C');
</script>
</pre>
<p>
Actual result is this:
</p>
<div id="mytab"><i>jTab rendering here..</i></div>
<script type="text/javascript">
jtab.render($('#mytab'),'Am7 C');
</script>
<h3>CAGED notation</h3>
<p>
</p>
<pre>
<div class="jtab chordonly">C:1 C:2 C:3 C:4 C:5</div>
<div class="jtab chordonly">C:6 C:7 C:8 C:9 C:10</div>
<div class="jtab chordonly">Cm:1 Cm:2 Cm:3 Cm:4 Cm:5</div>
<div class="jtab chordonly">Eb7:1 Eb7:2 Eb7:3 Eb7:4 Eb7:5</div>
</pre>
<div class="jtab chordonly">C:1 C:2 C:3 C:4 C:5</div>
<div class="jtab chordonly">C:6 C:7 C:8 C:9 C:10</div>
<div class="jtab chordonly">Cm:1 Cm:2 Cm:3 Cm:4 Cm:5</div>
<div class="jtab chordonly">Eb7:1 Eb7:2 Eb7:3 Eb7:4 Eb7:5</div>
<h3>Customising the color palette</h3>
<p>jTab will render using the color and background-color styles of the enclosing HTML element.
</p>
<pre>
<div class="jtab" style="color:blue;background-color:yellow">Am $e 3 1 0</div>
</pre>
<div class="jtab" style="color:blue;background-color:yellow">Am $e 3 1 0</div>
</div>
<div id="footer">
</div>
</body>
</html>