EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: svitucci on May 28, 2014, 10:52:41 AM



Title: Nested Tabs
Post by: svitucci on May 28, 2014, 10:52:41 AM
Is it possible to have set of nested tabs with in a nested tab.
In other words, I have no problem with my first level of tabs.
Is it possible to have a second level of nested tabs....

Thank you


Title: Re: Nested Tabs
Post by: stworthy on May 29, 2014, 12:40:39 AM
There are no limitations on the level amount. Only one thing must be mentioned, be sure to set the 'fit' property to true for your sub tabs.


Title: Re: Nested Tabs
Post by: svitucci on May 30, 2014, 07:56:27 AM
There are no limitations on the level amount. Only one thing must be mentioned, be sure to set the 'fit' property to true for your sub tabs.

I do have the fit property set. I am missing something. see HTML below. Just the sub tab section.
Thank you for your attention
<div title="Sub Tabs" data-options="fit:true,plain:true" style="padding:10px;">
            <div class="easyui-tabs" data-options="fit:true,plain:true">
                <div title="Title1" style="padding:10px;">efore you continue please account for your VFC Returns <a href="#">HERE.</a></strong></span></div>
                <div title="Title2" style="padding:10px;">Jump 2</a></div>
                <div title="Title3">
                        <div title="Sub Tabs 02" data-options="fit:true,plain:true" style="padding:10px;">
                                <div class="easyui-tabs" data-options="fit:true,plain:true">
                                        <div title="Title7" style="padding:10px;">Content 4</div>
                                        <div title="Title8" style="padding:10px;">Content 5</div>
                                        <div title="Title9" style="padding:10px;">Content 6</div>
                                </div>               
                        </div>
                </div>
                <div title="Title4" style="padding:10px;">Content 4</div>
                <div title="Title5" style="padding:10px;">Content 5</div>
                <div title="Title6" style="padding:10px;">Content 6</div>
            </div>
        </div>


Title: Re: Nested Tabs
Post by: stworthy on May 30, 2014, 08:53:52 AM
Please try the code below, be sure to download and apply the patch file from http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.6-patch.zip.
Code:
<div class="easyui-tabs" data-options="fit:true,plain:true">
    <div title="Title1" style="padding:10px;">efore you continue please account for your VFC Returns <a href="#">HERE.</a></strong></span></div>
    <div title="Title2" style="padding:10px;">Jump 2</div>
    <div title="Title3">
            <div class="easyui-tabs" data-options="fit:true,plain:true">
                    <div title="Title7" style="padding:10px;">Content 4</div>
                    <div title="Title8" style="padding:10px;">Content 5</div>
                    <div title="Title9" style="padding:10px;">Content 6</div>
            </div>               
    </div>
    <div title="Title4" style="padding:10px;">Content 4</div>
    <div title="Title5" style="padding:10px;">Content 5</div>
    <div title="Title6" style="padding:10px;">Content 6</div>
</div>


Title: Re: Nested Tabs
Post by: svitucci on May 30, 2014, 10:39:03 AM
Perfect....Thank you