<script>
function CreateButton(ParentID, Name, Caption){
$("#" + ParentID).append("<ons-button id=\"" + Name + "\">" + Caption + "</ons-button>");
}

</script>

<style>
.full-height {
height: 100%;
}
</style>


<ons-tabbar id="tabbar" swipeable>
    <ons-tab page="page1" active><ons-icon icon="fa-user-astronaut"></ons-icon></ons-tab>
    <ons-tab page="page2"><ons-icon icon="fa-rocket"></ons-icon></ons-tab>
    <ons-tab page="page3"><ons-icon icon="fa-star"></ons-icon></ons-tab>
</ons-tabbar>

<template id="page1">
  <ons-page>

  <ons-toolbar>
    <div class="center">
     	TBITEM
    </div>
  </ons-toolbar>

<div id="mainpane" class="full-height">

<ons-row class="full-height">
<ons-col id="col1" width="40px" style="background-color: #f8f8f8"> 
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
<ons-toolbar-button><ons-icon icon="fa-twitter" width="20px" style="padding-bottom: 8px; padding-top: 8px;"></ons-icon></ons-toolbar-button></br>
</ons-col>

<ons-col id="col2" >


</ons-col>
</ons-row>

<script>
//CreateButton("col1", "myButton1", "Hello");
//CreateButton("col2", "myButton2", "Hello");

</script>

</div>

   </ons-page>
</template>

<template id="page2">
<ons-page>
<h2>TITLE</h2>

CONTENT

</ons-page>
</template>

<template id="page3">
<ons-page>
<h2>TITLE</h2>

CONTENT

</ons-page>
</template>