What is TabDiv?
TabDiv lets you embed nice looking guitar tablature into your blogs and web-sites, without using any external applications. This means that you can create, edit, and share your tablature by simply editing the text-based VexTab notation in your HTML document or blog post. Since the tablature is rendered entirely in JavaScript, you don't need to manage lots of crufty image files or deal with ASCII tablature anymore. Read the VexTab Tutorial for demos and examples.How to Embed
Step 1. Download TabDiv and unzip it on your host. Step 2. Include the VexFlow, TabDiv, and jQuery 1.4 sources in your HTML document. Remember to include the CSS file too.
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://path/to/vexflow.js"></script>
<script src="http://path/to/vextabdiv.js"></script>
<link href="http://path/to/tabdiv.css" media="screen" rel="Stylesheet" type="text/css" />
Step 3 (Optional). For SVG support, include
Raphael.js in your document. Without
this TabDiv uses HTML5 Canvas.
Step 4. Any src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://path/to/vexflow.js"></script>
<script src="http://path/to/vextabdiv.js"></script>
<link href="http://path/to/tabdiv.css" media="screen" rel="Stylesheet" type="text/css" />
DIV elements you add to your document,
with the class set to vex-tabdiv will be rendered as guitar
tab.
For example, the tab on the begininning of this page was generated
by adding the following to this page:
<div class="vex-tabdiv" width=400 scale=0.8>
tabstave
notes (5/2.6/3.7/4) 5h6/3 7/4 | 5h7p5/4 7/5 5s3/5
tabstave
notes (8/2.7b9b7/3) (5b6/2.5b6/3)v 7s0/4 | (5/2.6/3.7/4)v
<div>
tabstave
notes (5/2.6/3.7/4) 5h6/3 7/4 | 5h7p5/4 7/5 5s3/5
tabstave
notes (8/2.7b9b7/3) (5b6/2.5b6/3)v 7s0/4 | (5/2.6/3.7/4)v
<div>