Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
amani kh
aui-tabs
January 3, 2013 1:27 AM
Answer

amani kh

Rank: Junior Member

Posts: 43

Join Date: November 16, 2012

Recent Posts

hi all,
I've created 3 tabs in the first 1 of them I wanna put a Form (a box with some content)

this is javascript code for the tabs:

AUI().ready('aui-tabs', function(A) {
var tabs = new A.TabView(
{
boundingBox: '#demo', items:
[
{
content: 'This my content 1' , label: 'Tab 1' },

{ content: 'This my content 2', label: 'Tab 2' },

{ content: 'This my content 3', label: 'Tab 3' }

] } ) .render(); });

now instead of 'This my content 1' I wanna put a box with some content (Form), here is the javascript code for that form

AUI().ready('aui-form-base', function(A) { var form = new A.Form( { contentBox: '#myForm' } ) .render(); });

now how can I integrate the code of the Form in the code of the tabs to get that Form inside of the first Tab. I am using liferay 6.1
thanks for ur help.
Amit Doshi
RE: aui-tabs
January 3, 2013 1:57 AM
Answer

Amit Doshi

Rank: Liferay Master

Posts: 549

Join Date: December 29, 2010

Recent Posts

amani kh:
hi all,
I've created 3 tabs in the first 1 of them I wanna put a Form (a box with some content)

this is javascript code for the tabs:

AUI().ready('aui-tabs', function(A) {
var tabs = new A.TabView(
{
boundingBox: '#demo', items:
[
{
content: 'This my content 1' , label: 'Tab 1' },

{ content: 'This my content 2', label: 'Tab 2' },

{ content: 'This my content 3', label: 'Tab 3' }

] } ) .render(); });

now instead of 'This my content 1' I wanna put a box with some content (Form), here is the javascript code for that form

AUI().ready('aui-form-base', function(A) { var form = new A.Form( { contentBox: '#myForm' } ) .render(); });

now how can I integrate the code of the Form in the code of the tabs to get that Form inside of the first Tab. I am using liferay 6.1
thanks for ur help.


Please check this link.

Here it was mentioned how to create the Tabs with different sections but using liferay-ui:tabs.

Thanks & Regards,
Amit Doshi
amani kh
RE: aui-tabs
January 3, 2013 1:58 AM
Answer

amani kh

Rank: Junior Member

Posts: 43

Join Date: November 16, 2012

Recent Posts

thanks Amit Doshi, I ll check it !
archana kale
RE: aui-tabs
January 18, 2013 5:02 AM
Answer

archana kale

Rank: New Member

Posts: 2

Join Date: January 17, 2013

Recent Posts

RE: aui-tabs I think the AUI tabs demo is probably the easiest way to re-produce / view the issue. Has anyone else found this or come across a solution
amani kh
RE: aui-tabs
January 18, 2013 10:38 AM
Answer

amani kh

Rank: Junior Member

Posts: 43

Join Date: November 16, 2012

Recent Posts

hi archana kale, maybe this old post could be helpful

http://www.liferay.com/community/forums/-/message_boards/message/13200942
Rajeeva Lochana .B.R
RE: aui-tabs
January 24, 2013 12:01 PM
Answer

Rajeeva Lochana .B.R

Rank: Junior Member

Posts: 65

Join Date: January 4, 2010

Recent Posts

Hi Amith and Archana,

Check the below sample code i hope this will help you to achieve your requirement.

 1
 2<body>
 3
 4        <h2>From markup</h2>
 5       
 6        <div id="markupTabs">
 7            <ul class="aui-tabview-list aui-widget-hd" id="test">
 8                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello A</a></li>
 9                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello B</a></li>
10                <li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello C</a></li>
11            </ul>
12
13            <div class="aui-tabview-content aui-widget-bd" id="testContent">
14                <div class="aui-tabview-content-item">
15                    <h3>1. New tab content</h3><br />
16                    Tab 1 body content
17                </div>
18                <div class="aui-tabview-content-item">
19                    <h3>2. New tab content</h3><br />
20                    Tab 2 body content
21                </div>
22                <div class="aui-tabview-content-item">
23                    <h3>3. New tab content</h3><br />
24                    Tab 3 body content
25                </div>
26            </div>
27        </div>
28
29       
30   
31
32<script type="text/javascript" charset="utf-8">
33
34AUI().ready(
35    'aui-tabs', 'substitute',
36    function(A) {
37        var tabs1 = new A.TabView(
38            {
39                boundingBox: '#markupTabs',
40                listNode: '#test',
41                contentNode: '#testContent'
42            }
43        );
44        tabs1.render();       
45    }
46);
47
48</script>
49
50</body>
Kushal Jayswal
RE: aui-tabs
February 13, 2014 3:02 AM
Answer

Kushal Jayswal

Rank: New Member

Posts: 16

Join Date: November 18, 2012

Recent Posts

Thanks Rajeeva for the code snippet.