How to do Nested Tabs position as center - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: How to do Nested Tabs position as center, jqxTabs, nested, Tabs

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

How to do Nested Tabs position as center Posts

August 13, 2012 at 9:37 am How to do Nested Tabs position as center #6740

Member

Hi ,In my Code I have one #Maintab having
1.Platform having subtab named as #tab
1.a. Newly imported platforms
1.b. Existing platforms
1.c. Agile PH Import Status
2.Peripherals having subtab named as #tab_a
2.a. Newly Imported SubPH
2.b. SubPH Import Status
3.Platform Software having subtab named as #tab_b
3.a. Newly imported platforms
3.b. Agile PH Import Status

Problem is in 2.a,2.b,3.a,3.b the alignment of words are bottom not center.How to make it in center.

@{
ViewBag.Title = “Test”;
}

Test

var basicDemo = (function () {

function _addEventListeners() {

};
function _createElements() {
debugger;
$(‘#Maintab’).jqxTabs({ height: 630, width: 1120, theme: basicDemo.config.theme });
debugger;
$(‘#tab’).jqxTabs({ height: 430, width: 1100, theme: basicDemo.config.theme });
debugger;
$(‘#tab_a’).jqxTabs({ height: 430, width: 1100, theme: basicDemo.config.theme });
$(‘#tab_b’).jqxTabs({ height: 430, width: 1100, theme: basicDemo.config.theme });
};
return {
config: { dragArea: null, theme: null },
init: function () { _createElements(); _addEventListeners(); }
};
} ());

$(document).ready(function () {

var theme = $.data(document.body, ‘theme’, theme);
if (theme == undefined) theme = ”;

//Setting demo’s theme
basicDemo.config.theme = theme;
//Initializing the demo
basicDemo.init();

});

Platform
Peripherals
Platform Software

Newly imported platforms
Existing platforms
Agile PH Import Status

Newly Imported SubPH
SubPH Import Status

Newly imported platforms
Agile PH Import Status

August 20, 2012 at 8:55 am How to do Nested Tabs position as center #6887

Dimitar

Participant

Hello RajaniKantaPanda,

This issue can be solved by setting the initTabContent property and its callback function as seen in the “Integration with other widgets” part of the demo. Here is your example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            var initTab = function () {
                $('#tab').jqxTabs({ width: 550, height: 150 });
            };
            var initTab_a = function () {
                $('#tab_a').jqxTabs({ width: 550, height: 150 });
            };
            var initTab_b = function () {
                $('#tab_b').jqxTabs({ width: 550, height: 150 });
            };
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initTab();
                        break;
                    case 1:
                        initTab_a();
                        break;
                    case 2:
                        initTab_b();
                        break;
                }
            }
            $('#Maintab').jqxTabs({ width: 550, height: 150, initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='Maintab'>
        <ul style='margin-left: 20px;'>
            <li>Platform</li>
            <li>Peripherals</li>
            <li>Platform Software</li>
        </ul>
        <div id="tab">
            <ul style='margin-left: 20px;'>
                <li>Newly imported platforms</li>
                <li>Existing platforms</li>
                <li>Agile PH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
            <div>
                Content 3
            </div>
        </div>
        <div id="tab_a">
            <ul style='margin-left: 20px;'>
                <li>Newly Imported SubPH</li>
                <li>SubPH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
        <div id="tab_b">
            <ul style='margin-left: 20px;'>
                <li>Newly imported platforms</li>
                <li>Agile PH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.