aui-tabs

[11年前 に 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.

[11年前 に Amit Doshi によって更新されました。]

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

[11年前 に amani kh によって更新されました。]

thanks Amit Doshi, I ll check it !

[11年前 に Rajeeva Lochana .B.R によって更新されました。]

Hi Amith and Archana,

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

		<h2>From markup</h2>
		
		<div id="markupTabs">
			<ul class="aui-tabview-list aui-widget-hd" id="test">
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello A</a></li>
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello B</a></li>
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello C</a></li>
			</ul>

			<div class="aui-tabview-content aui-widget-bd" id="testContent">
				<div class="aui-tabview-content-item">
					<h3>1. New tab content</h3><br>
					Tab 1 body content 
				</div>
				<div class="aui-tabview-content-item">
					<h3>2. New tab content</h3><br>
					Tab 2 body content 
				</div>
				<div class="aui-tabview-content-item">
					<h3>3. New tab content</h3><br>
					Tab 3 body content 
				</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>

[10年前 に Kushal Jayswal によって更新されました。]

Thanks Rajeeva for the code snippet.

[11年前 に archana kale によって更新されました。]

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

[11年前 に amani kh によって更新されました。]

hi archana kale, maybe this old post could be helpful

http://www.liferay.com/community/forums/-/message_boards/message/13200942