Tabs Layout
layout:{
type: 'tab' // or tabs
}
Demo
<div id="tab-target1" style="height:470px"></div>
<script type="text/javascript">
new ludo.FramedView({
title:'Tab Layout',
renderTo:'#tab-target1',
layout:{
width:400,
height:440,
type:'tabs'
},
children:[
{
title: 'Calendar Tab',
type:'calendar.Calendar'
},
{
title:'TimePicker tab',
type:'calendar.TimePicker',
layout:{
closable:true
}
}
]
});
</script>
In the Tab Layout, only one child view is visible at a time. You navigate between child views
by clicking on tabs, or by calling the child views show method.
Tabs can be rendered at top, left, right and bottom. Default position is left. Your can specify where to
render the tabs using the tabs property on the layout object.
tabs:'top|bottom|left|right'
Default tab position is top
Below, you will see examples of tabs positioned to the left, right and bottom.
tabs:'bottom'
<div id="tab-target2" style="height:250px"></div>
<script type="text/javascript">
new ludo.FramedView({
title:'Tab Layout',
renderTo:'#tab-target2',
layout:{
width:400,
height:200,
type:'tabs',
tabs:'bottom'
},
children:[
{
title:'My View',
html: 'My View'
},
{
title:'My Other View',
html: 'My Other View'
}
]
});
</script>
tabs:'left'
<div id="tab-target3" style="height:250px"></div>
<script type="text/javascript">
new ludo.FramedView({
title:'Tab Layout',
renderTo:'#tab-target3',
layout:{
width:400,
height:230,
type:'tabs',
tabs:'left'
},
children:[
{
title:'My View',
html: 'My View'
},
{
title:'My Other View',
html: 'My Other View'
}
]
});
</script>
tabs:'right'
<div id="tab-target4" style="height:250px"></div>
<script type="text/javascript">
new ludo.FramedView({
title:'Tab Layout',
renderTo:'#tab-target4',
layout:{
width:400,
height:230,
type:'tabs',
tabs:'right'
},
children:[
{
title:'My View',
html: 'My View'
},
{
title:'My Other View',
html: 'My Other View'
}
]
});
</script>
Tab title
The title of the tab is set using the title attribute on each children.
{
title:'TimePicker tab',
type:'calendar.TimePicker'
}
Overflow
When tabs are rendered at the top or bottom, and you don't have enough space for all the tabs, you will see a button
to the right which will show a menu with missing tabs.
You can see an example of this below:
<div id="tab-target5" style="height:250px"></div>
<script type="text/javascript">
new ludo.FramedView({
title:'Tab Layout',
id:'overflow',
renderTo:'#tab-target5',
layout:{
width:400,
height:230,
type:'tabs',
tabs:'top'
},
children:[
{
title:'My View',
html: 'My View'
},
{
title:'My Other View',
html: 'My Other View'
},
{
title:'Title C',
html: 'Content C'
},
{
title:'Title D',
html: 'Content C'
},
{
title:'Title E',
html: 'Content C'
},
{
title:'Title F',
html: 'Content C'
},
{
title:'Title G',
html: 'Content C'
},
{
title:'Title H',
html: 'Content C'
},
{
title:'Title I',
html: 'Content C'
},
{
title:'Title J',
html: 'Content C'
},
{
title:'Title K',
html: 'Content C'
},
{
title:'Title L',
html: 'Content C'
}
]
});
</script>
Add children at runtime
When child views are added during runtime, the tab view will be automatically updated.
The example below adds a new child view to the tab layout above:
<a href="#" onclick="ludo.$('overflow').addChild({title:'My new View'});return false">Add child view to the layout above</a>
Remove child views
Generated 2016-12-21 21:38:21
