jTab

https://jtab.tardate.com
Admin
jTab is an open-source JavaScript library that converts simple text notation into interactive guitar...
Tokens:4,521
Snippets:63
Trust Score:7.2
Update:4 months ago
Show doc for...
Tokens:
Raw
### CAGED notation

Source: https://jtab.tardate.com/examples.htm

Examples of CAGED system chord shapes rendered using jTab.

```html
<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>

```

--------------------------------

### Scripted rendering

Source: https://jtab.tardate.com/examples.htm

Demonstrates how to use the jTab JavaScript API to render musical notation dynamically.

```html
<div id="mytab"></div>
<script type="text/javascript">
    jtab.render($('#mytab'),'Am7 C');
</script>

```

--------------------------------

### Chord Notation Examples

Source: https://jtab.tardate.com/index.htm

Examples of how to represent chords using jTab notation, including shorthand for six-string blocks and muted strings.

```plaintext
022100
8.10.10.9.8.8
X02220
```

--------------------------------

### Custom Chord Notation Example

Source: https://jtab.tardate.com/index.htm

Example of defining a custom chord with frets and fingers for all six strings.

```text
%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]
```

--------------------------------

### Implicit Rendering Example

Source: https://jtab.tardate.com/index.htm

Example of how to perform implicit rendering by assigning the 'jtab' class to a block tag containing tab notation.

```html
<div class="jtab"> E / / / | Am / B / || </div>
```

--------------------------------

### Tab Notation Examples

Source: https://jtab.tardate.com/index.htm

Examples of how to represent single notes, slides, hammer-ons, pull-offs, and multiple notes on different strings using jTab notation.

```plaintext
$2 0 1 3
$2 0 1 3 $1 0 1 3/5
$B 0 1 3 $e 0 1 3/5
```

```plaintext
$3.6.$2.5h7 $1 5 $2 7
$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9
```

--------------------------------

### Implicitly render a custom named chord

Source: https://jtab.tardate.com/examples.htm

Shows how to implicitly render a custom named chord using jTab notation.

```html
<div class="jtab chordonly"> %7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5] </div>

```

--------------------------------

### Customising the color palette

Source: https://jtab.tardate.com/examples.htm

Shows how jTab renders using the color and background-color styles of the enclosing HTML element.

```html
<div class="jtab" style="color:blue;background-color:yellow">Am $e 3 1 0</div>

```

--------------------------------

### More than one note at a time in tab

Source: https://jtab.tardate.com/examples.htm

Illustrates how to represent multiple notes played simultaneously in tabulature notation.

```html
<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>

```

--------------------------------

### Include jTab Javascript files

Source: https://jtab.tardate.com/index.htm

Example of how to include jTab and its dependencies (jQuery, Raphaël) in an HTML page.

```html
<head>
  ... (other stuff) ...
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <link type="text/css" rel="stylesheet" href="http://jtab.tardate.com/css/jtab-helper.css"/>

  <script src="https://jtab.tardate.com/javascripts/jquery.js" type="text/javascript"></script>
  <script src="https://jtab.tardate.com/javascripts/raphael.js" type="text/javascript"></script>
  <script src="https://jtab.tardate.com/javascripts/jtab.js" type="text/javascript"></script>

</head>
<body>
    ...
```

--------------------------------

### Implicitly render a mixed chord and tab phrase

Source: https://jtab.tardate.com/examples.htm

Demonstrates rendering a phrase that includes both chords and tabulature using the 'jtab' class.

```html
<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>

```

--------------------------------

### A sequence of notes across two strings

Source: https://jtab.tardate.com/examples.htm

Demonstrates using both 654321 and EADGBe for string numbering in tabulature notation.

```html
<div class="jtab tabonly">$2 0 1 3 $1 0 1 3/5 | $B 0 1 3 $e 0 1 3/5 ||</div>

```

--------------------------------

### Optional Stylesheet Inclusion

Source: https://jtab.tardate.com/index.htm

Example of including the optional jTab stylesheet in your pages to preset jTab elements.

```html
<link type="text/css" rel="stylesheet" href="https://jtab.tardate.com/css/jtab-helper.css"/>

```

--------------------------------

### Pre-sized jTab Elements

Source: https://jtab.tardate.com/index.htm

Examples of using CSS classes to pre-size jTab elements for different content types.

```html
<div class="jtab">(pre-sized for chord and tab)</div>
<div class="jtab chordonly">(pre-sized for chord only)</div>
<div class="jtab tabonly">(pre-sized for tab only)</div>

```

--------------------------------

### Explicit Call to Rendering Function

Source: https://jtab.tardate.com/index.htm

Example of an explicit call to the jtab.renderimplicit() function, useful when implicit rendering is not happening.

```javascript
    <script type="text/javascript">
    jtab.renderimplicit();
    </script>

```

--------------------------------

### Implicitly render a chord-only phrase

Source: https://jtab.tardate.com/examples.htm

Demonstrates rendering a chord-only phrase using the 'jtab chordonly' class. The 'chordonly' class is optional and helps reduce screen jitter by pre-adjusting display size.

```html
<div class="jtab chordonly"> E / / / | A7 / B7 / || </div>

```

--------------------------------

### Shorthand tab notation for all strings

Source: https://jtab.tardate.com/examples.htm

Shows shorthand tab notation for a whole or partial chord, including the use of periods for frets above 9 and 'X' for unused strings.

```html
<div class="jtab tabonly">022100 / / / X02220 / 8.10.10.9.8.8 / ||</div>

```

--------------------------------

### A simple three note sequence on the B (2nd) string

Source: https://jtab.tardate.com/examples.htm

Shows a simple sequence of three notes played on the B string using tabulature notation.

```html
<div class="jtab tabonly">$B 0 1 3 | $2 5 3 0 ||</div>

```

--------------------------------

### Implicitly render a tab-only phrase

Source: https://jtab.tardate.com/examples.htm

Illustrates rendering a tab-only phrase with the 'jtab tabonly' class. The 'tabonly' class is optional and aids in reducing screen jitter.

```html
<div class="jtab tabonly">$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 ||</div>

```

--------------------------------

### Interactive/Explicit Rendering using Javascript

Source: https://jtab.tardate.com/index.htm

jTab can be used to render notation in real-time using Javascript, which could be based on user input or dynamically generated notation.

```javascript
jTab.render("notation_id", "notation_text");
```
Tokens:
Raw