AUI script tab


Sample Code


<h2>From markup</h2>

<div id="markupTabs">
<ul id="test">
<li><a href="javascript:;">Hello A</a></li>
<li><a href="javascript:;">Hello B</a></li>
<li><a href="javascript:;">Hello C</a></li>
</ul>

<div id="testContent">
<div>
<h3>1. New tab content</h3><br />
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
<h3>2. New tab content</h3><br />
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
<h3>3. New tab content</h3><br />
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>

 


<script type="text/javascript" charset="utf-8">

AUI().ready(
'aui-tabs', 'substitute',
function(A) {
var tabs1 = new A.TabView(
{
boundingBox: '#markupTabs',
listNode: '#test',
contentNode: '#testContent'
}
);
tabs1.render();
}
);

</script>

 

Check Point:

AUI-Tab

Advertisements

Comments on: "AUI script tab" (3)

  1. sunil kumar G said:

    Hi Rajeeva,

    I am trying to include jsp file in each tab using , I am not able to implement this,

    Have you implemented same anywhere

    Thanks in advance,
    Sunil G

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: