jQWidgets Forums

Tagged: jqxscrollbar, jqxsplitter, jqxTabs, scrollbar, splitter, Tabs

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

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

Author

tab inside of splitter with scroll-bars Posts

August 29, 2013 at 8:27 pm tab inside of splitter with scroll-bars #27989

Member

I have been struggling with getting a two panel layout with tabs in the bottom to show the themed scrollbars for the tabbed content. Could anyone please provide an example of how to get a scrollable top panel with tabs in the bottom panel where each tab is scrollable.

August 30, 2013 at 5:30 am tab inside of splitter with scroll-bars #28006

Dimitar

Participant

Hello exoprise,

Unfortunately, jqxTabs does not support jqxScrollBar. However, here is an example with scrollable upper part and scrollable tabs:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            $('#splitContainer').jqxSplitter({ height: 600, width: 600, orientation: 'horizontal', theme: theme, panels: [{ collapsible: false, size: '50%' }, { size: '50%'}] });
            $("#tabs").jqxTabs({ theme: theme, height: '100%', width: '100%' });
        });
    </script>
</head>
<body class='default'>
    <div id="splitContainer">
        <div style="overflow-y: scroll;">
            jQWidgets provides a comprehensive solution for building professional web sites
            and mobile apps. It is built entirely on open standards and technologies like HTML5,
            CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps
            you create apps and websites that look beautiful on desktops, tablets and smart
            phones. jQWidgets is a feature complete framework with professional touch-enabled
            jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in
            WAI-ARIA accessibility, internationalization and MVVM support. jQWidgets provides
            a comprehensive solution for building professional web sites and mobile apps. It
            is built entirely on open standards and technologies like HTML5, CSS, Javascript
            and jQuery. jQWidgets enables responsive web development and helps you create apps
            and websites that look beautiful on desktops, tablets and smart phones. jQWidgets
            is a feature complete framework with professional touch-enabled jQuery widgets,
            themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA
            accessibility, internationalization and MVVM support. jQWidgets provides a comprehensive
            solution for building professional web sites and mobile apps. It is built entirely
            on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets
            enables responsive web development and helps you create apps and websites that look
            beautiful on desktops, tablets and smart phones. jQWidgets is a feature complete
            framework with professional touch-enabled jQuery widgets, themes, input validation,
            drag & drop plug-ins, data adapters, built-in WAI-ARIA accessibility, internationalization
            and MVVM support. jQWidgets provides a comprehensive solution for building professional
            web sites and mobile apps. It is built entirely on open standards and technologies
            like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development
            and helps you create apps and websites that look beautiful on desktops, tablets
            and smart phones. jQWidgets is a feature complete framework with professional touch-enabled
            jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in
            WAI-ARIA accessibility, internationalization and MVVM support. jQWidgets provides
            a comprehensive solution for building professional web sites and mobile apps. It
            is built entirely on open standards and technologies like HTML5, CSS, Javascript
            and jQuery. jQWidgets enables responsive web development and helps you create apps
            and websites that look beautiful on desktops, tablets and smart phones. jQWidgets
            is a feature complete framework with professional touch-enabled jQuery widgets,
            themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA
            accessibility, internationalization and MVVM support. jQWidgets provides a comprehensive
            solution for building professional web sites and mobile apps. It is built entirely
            on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets
            enables responsive web development and helps you create apps and websites that look
            beautiful on desktops, tablets and smart phones. jQWidgets is a feature complete
            framework with professional touch-enabled jQuery widgets, themes, input validation,
            drag & drop plug-ins, data adapters, built-in WAI-ARIA accessibility, internationalization
            and MVVM support. jQWidgets provides a comprehensive solution for building professional
            web sites and mobile apps. It is built entirely on open standards and technologies
            like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development
            and helps you create apps and websites that look beautiful on desktops, tablets
            and smart phones. jQWidgets is a feature complete framework with professional touch-enabled
            jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in
            WAI-ARIA accessibility, internationalization and MVVM support. jQWidgets provides
            a comprehensive solution for building professional web sites and mobile apps. It
            is built entirely on open standards and technologies like HTML5, CSS, Javascript
            and jQuery. jQWidgets enables responsive web development and helps you create apps
            and websites that look beautiful on desktops, tablets and smart phones. jQWidgets
            is a feature complete framework with professional touch-enabled jQuery widgets,
            themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA
            accessibility, internationalization and MVVM support.
        </div>
        <div>
            <div class="jqx-hideborder jqx-hidescrollbars" id="tabs">
                <ul>
                    <li style="margin-left: 30px;">Tab 1</li>
                    <li>Tab 2</li>
                </ul>
                <div>
                    jQWidgets provides a comprehensive solution for building professional web sites
                    and mobile apps. It is built entirely on open standards and technologies like HTML5,
                    CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps
                    you create apps and websites that look beautiful on desktops, tablets and smart
                    phones. jQWidgets is a feature complete framework with professional touch-enabled
                    jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in
                    WAI-ARIA accessibility, internationalization and MVVM support.jQWidgets provides
                    a comprehensive solution for building professional web sites and mobile apps. It
                    is built entirely on open standards and technologies like HTML5, CSS, Javascript
                    and jQuery. jQWidgets enables responsive web development and helps you create apps
                    and websites that look beautiful on desktops, tablets and smart phones. jQWidgets
                    is a feature complete framework with professional touch-enabled jQuery widgets,
                    themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA
                    accessibility, internationalization and MVVM support.jQWidgets provides a comprehensive
                    solution for building professional web sites and mobile apps. It is built entirely
                    on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets
                    enables responsive web development and helps you create apps and websites that look
                    beautiful on desktops, tablets and smart phones. jQWidgets is a feature complete
                    framework with professional touch-enabled jQuery widgets, themes, input validation,
                    drag & drop plug-ins, data adapters, built-in WAI-ARIA accessibility, internationalization
                    and MVVM support.</div>
                <div>
                    Content 2</div>
            </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.