examples.htm

<!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 &amp; 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>
&lt;div class="jtab chordonly"&gt; E / / / | A7 / B7 / || &lt;/div&gt;
</pre>
<div class="jtab chordonly"> E / / / | A7 / B7 / || </div>

<h3>Implicitly render a custom named chord</h3>
<pre>
&lt;div class="jtab chordonly"&gt; %7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5] &lt;/div&gt;
</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>
&lt;div class="jtab tabonly"&gt;$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||&lt;/div&gt;
</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>
&lt;div class="jtab"&gt;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 ||&lt;/div&gt;
</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>
&lt;div class="jtab tabonly"&gt;$B 0 1 3 | $2 5 3 0 ||&lt;/div&gt;
</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>
&lt;div class="jtab tabonly"&gt;$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||&lt;/div&gt;
</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>
&lt;div class="jtab tabonly"&gt;$3.6.$2.5h7 $1 5 $2 7 |&lt;/div&gt;
&lt;div class="jtab tabonly"&gt;$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||&lt;/div&gt;
</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>
&lt;div class="jtab tabonly"&gt;022100 / / / X02220 / 8.10.10.9.8.8 / ||&lt;/div&gt;
</pre>
<div class="jtab tabonly">022100 / / / X02220 / 8.10.10.9.8.8 / ||</div>

<h3>Scripted rendering</h3>
<p>
</p>
<pre>
&lt;div id="mytab"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    jtab.render($('#mytab'),'Am7 C');
&lt;/script&gt;
</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>
&lt;div class="jtab chordonly"&gt;C:1 C:2 C:3 C:4 C:5&lt;/div&gt;
&lt;div class="jtab chordonly"&gt;C:6 C:7 C:8 C:9 C:10&lt;/div&gt;
&lt;div class="jtab chordonly"&gt;Cm:1 Cm:2 Cm:3 Cm:4 Cm:5&lt;/div&gt;
&lt;div class="jtab chordonly"&gt;Eb7:1 Eb7:2 Eb7:3 Eb7:4 Eb7:5&lt;/div&gt;
</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>
&lt;div class="jtab" style="color:blue;background-color:yellow"&gt;Am $e 3 1 0&lt;/div&gt;
</pre>
<div class="jtab" style="color:blue;background-color:yellow">Am $e 3 1 0</div>

</div>

<div id="footer">
</div>

  </body>
</html>