meteor Blaze User Interface Recipes (Bootstrap; No jQuery) Tabbed Workflow
Example
Document Object Model
Start by creating your tabs and panes in your Object Model...
<template name="samplePage">
<div id="samplePage" class="page">
<ul class="nav nav-tabs">
<li id="firstPanelTab"><a href="#firstPanel">First</a></li>
<li id="secondPanelTab"><a href="#secondPanel">Second</a></li>
</ul>
<div id="firstPanel" class="{{firstPanelVisibility}}">
{{> firstPanel }}
</div>
<div id="secondPanel" class="{{secondPanelVisibility}}">
{{> secondPanel }}
</div>
</div>
</template>
Javascript
// this variable controls which tab is displayed and associated application state
Session.setDefault('selectedPanel', 1);
Template.name.helpers({
firstPanelVisibility: function (){
if(Session.get('selectedPanel') === 1){
return "visible";
}else{
return "hidden";
}
},
secondPanelVisibility: function (){
if(Session.get('selectedPanel') === 2){
return "visible";
}else{
return "hidden";
}
},
thirdPanelVisibility: function (){
if(Session.get('selectedPanel') === 3){
return "visible";
}else{
return "hidden";
}
},
firstPanelActive: function (){
if(Session.get('selectedPanel') === 1){
return "active panel-tab";
}else{
return "panel-tab";
}
},
secondPanelActive: function (){
if(Session.get('selectedPanel') === 2){
return "active panel-tab";
}else{
return "panel-tab";
}
},
thirdPanelActive: function (){
if(Session.get('selectedPanel') === 3){
return "active panel-tab";
}else{
return "panel-tab";
}
}
});
Styling
.visible {
display: block;
visibility: visible;
}
.hidden {
display: none;
visibility: hidden;
}
Active Tab For added effect, you can extend this pattern by injecting classes to indicate the active tab.
<li id="firstPanelTab" class="{{firstPanelActive}}"><a href="#firstPanel">First</a></li>
<li id="secondPanelTab" class="{{secondPanelActive}}"><a href="#secondPanel">Second</a></li>
Template.firstPanel.helpers({
firstPanelActive: function (){
if(Session.get('selectedPanel') === 1){
return "active";
}else{
return "";
}
},
secondPanelActive: function (){
if(Session.get('selectedPanel') === 2){
return "active";
}else{
return "";
}
},
});
