alphaTab - Layout

Back

This sample shows how setup layout specific settings

Page Layout

Page Layout (5 Measures per Line)

Page Layout (From Measure 5 to 20)

Horizontal

Source

<script language="JavaScript" type="text/javascript">
(function($) {
    $(document).ready(function() { 
        var f = 'files/Skillet.gp5';
        
        $('div.alphaTabPage').alphaTab({file: f,  layout: "page"});
        $('div.alphaTabPage2').alphaTab({file: f, layout: {
            mode: "page",
            measuresPerLine: 5,
            hideSongInfo: true
        }});
        $('div.alphaTabPage3').alphaTab({file: f, layout: {
            mode: "page",
            startMeasure: 5,
            measureCount: 5
        }});
        $('div.alphaTabHorizontal').alphaTab({file: f, layout: "horizontal"});
    });
})(jQuery);
</script>
<h2>Page Layout</h2>
<div class="alphaTabPage"></div>
<h2>Page Layout (5 Measures per Line)</h2>
<div class="alphaTabPage2"></div>
<h2>Page Layout (From Measure 5 to 20)</h2>
<div class="alphaTabPage3"></div>
<h2>Horizontal</h2>
<div class="alphaTabHorizontal"></div>