• View
  • Source
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content

Handler

<cffunction name="dspTabbedPanel" access="public" returntype="void" output="false">
    <cfargument name="Event" type="coldbox.system.beans.requestContext">
    <cfset var spry = getPlugin("Spry",true)>
    <cfset spry.setTabbedPanel("tabbedPanels1","defaultTab:2")>
    <cfset spry.setTabbedPanel("tabbedPanels2")>
    <cfset Event.setView("spryExample/tabbedPanel")>        
</cffunction>

View

<div class="TabbedPanels" id="tabbedPanels1" style="width:500px;height:150px;">
    <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab">Tab 1</li>
        <li class="TabbedPanelsTab">Tab 2</li>
        <li class="TabbedPanelsTab">Tab 3</li>
        <li class="TabbedPanelsTab">Tab 4</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent" style="height:100px;">Tab 1 Content</div>
        <div class="TabbedPanelsContent">Tab 2 Content</div>
        <div class="TabbedPanelsContent">Tab 3 Content</div>
        <div class="TabbedPanelsContent">Tab 4 Content</div>
    </div>
</div>