Cf-layout Tab
Callbacks
Tag allow to set a series of callback to customize your tabs acting on events.
- TabsSelect
- TabsLoad
- TabsEnable
- TabsDisable
- TabsAdd
- TabsRemove
Any callback must accepts 2 arguments as per jquery ui docs:
Event binding example:
function(event, ui) {
// Objects available in the function context:
ui.tab // anchor element of the tab
ui.panel // element, that contains tab contents
ui.index // zero-based index
}
Page Code
**************************************************************
js
**************************************************************
<script type="text/javascript">
function selectCallback(event,ui){
alert('Selected tab n. ' + ui.index);
}
function addCallback(event,ui){
alert('Added tab n. ' + ui.index);
}
function removeCallback(event,ui){
alert('Removed tab n. ' + ui.index);
}
function enableCallback(event,ui){
alert('Enabled tab n. ' + ui.index);
}
function disableCallback(event,ui){
alert('Disabled tab n. ' + ui.index);
}
function loadCallback(event,ui){
alert('Loaded tab n. ' + ui.index);
}
</script>
**************************************************************
tag
**************************************************************
<cflayout type="tab" name="callbackTest" tabsenable="enableCallback"
tabsdisable="disableCallback" tabsadd="addCallback" tabsremove="removeCallback"
tabsselect="selectCallback" tabsload="loadCallback">
<cflayoutarea title="One">tab 1</cflayoutarea>
<cflayoutarea title="Two" disabled="true" name="disabled1">tab 2</cflayoutarea>
<cflayoutarea title="Three" disabled="true" name="disabled2">tab 3</cflayoutarea>
</cflayout>
**************************************************************
html
**************************************************************
<ul>
<li><a href="javascript:ColdFusion.Layout.enableTab('callbackTest','disabled1')">Enable Tab 2</a></li>
<li><a href="javascript:ColdFusion.Layout.disableTab('callbackTest','disabled1')">Disable Tab 2</a></li>
<li><a href="javascript:ColdFusion.Layout.enableTab('callbackTest','disabled2')">Enable Tab 3</a></li>
<li><a href="javascript:ColdFusion.Layout.disableTab('callbackTest','disabled2')">Disable Tab 3</a></li>
<li>
<a href="javascript:ColdFusion.Layout.createTab('callbackTest','','New Tab',
'/RailoAjax/tests/cflayout/files/ajax.cfm',{refreshOnActivate:false})">Add a New Tab.</a>
</li>
<li>
<a href="javascript:ColdFusion.Layout.removeLastTab('callbackTest')">Remove Last Tab.</a>
</li>
</ul>