Tabs and Accordions

Below are the configuration settings used to create the sample tabbed widget show above. This is a model that you can use as the basis for your own widgets

Content

The following fields are to support a three panel slider with captions for each slider. 

Field NameField Type
label1text
content1rich text
label2text
content2rich text
label3text
content3rich text
colortext

 

Resources

The javascript and CSS powering this widget come from jQuery UI, a commonly used, free jQuery plugin. Since Percussion ships with this library, there is no need to download or reference these resources as they are automatically included as part of the page.  

Display

This is the HTML needed to render the widget:

<div id="tabs">
<ul>
<li><a href="#tabs-1">$label1</a></li>
<li><a href="#tabs-2">$label2</a></li>
<li><a href="#tabs-3">$label3</a></li>
<li class="last"></li>
</ul>
<div id="tabs-1">
<p>$content1</p>
</div>
<div id="tabs-2">
<p>$content2</p>
</div>
<div id="tabs-3">
<p>$content3</p>
</div>
</div>

 

Leave a comment

*
*