<![CDATA[
<!-- Style definitions for our tab control -->
<style type="text/css">
* {
-moz-box-sizing:border-box;
}
.Tabs {
width:430px;
border:1px solid #000;
padding:10px;
background:#CCC;
font-size:11px;
font-family:verdana, arial, sans-serif;
}
.TabHead {
list-style:none;
padding:0 10px;
margin:0;
height:20px;
position:relative;
line-height:16px;
}
.TabControl {
float:left;
width:120px;
margin:0 -1px 0 0;
padding:0 10px;
background:#DDD;
cursor:hand;
cursor:pointer;
border:1px solid #000;
border-bottom:none;
font-weight:bold;
height:16px;
position:relative;
top:4px;
overflow:hidden;
}
.TC-Select {
top:1px;
color:#000;
background:#FFF;
height:20px;
}
.TC-Hover {
background:#EEE;
}
.TabBody {
background:#FFF;
clear:left;
border:1px solid #000;
height:200px;
padding:10px;
overflow:auto;
}
</style>
<!-- Behavior definition for our tabcontrol -->
<s:behavior b:name="TabControl">
<!--
Our tab has 1 event handler: oncommand which selects the associated
tabsection
-->
<s:event b:on="command">
<s:task b:action="select" b:target="{@b:followstate}"/>
</s:event>
<!-- Here we define the CSS classes that are applied to (pseudo-) states -->
<s:state b:on="deselect" b:normal="TabControl" b:hover="TabControl TC-Hover"/>
<s:state b:on="select" b:normal="TabControl TC-Select"/>
</s:behavior>
<div class="Tabs">
<!-- The tabs -->
<ul class="TabHead">
<li b:followstate="id('TabSection-1')" b:behavior="TabControl">Lorem Ipsum</li>
<li b:followstate="id('TabSection-2')" b:behavior="TabControl">Duis aute irure</li>
<li b:followstate="id('TabSection-3')" b:behavior="TabControl">Excepteur sint</li>
</ul>
<!-- The content sections -->
<b:deck class="TabBody">
<div id="TabSection-1">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="TabSection-2">
<h2>Duis aute irure</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="TabSection-3">
<h2>Excepteur sint</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</b:deck>
</div>
]]>