jQuery UI Widgets Forums Navigation Tabs Tabs with no content (only for selection)

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

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

  • Pinkishu
    Participant

    Hello,

    I only need the tab control for selection (so being able to click tabs that are then visually selected). The tabs should have no content that they display. If using pre-defined tabs I found that doing <div style=”visibility: hidden; width: 0px; height: 0px;”> for the tab seemed to work well, however I cannot figure out how to use that with tabs dynamically added through jqxTabs methods.

    I cannot seem to find a way to access a tab that was dynamically added by jqxTabs methods, so I can’t seem to manipulate its styling.
    Are there any better ways to have tabs without content? And how do make it work with dynamically added tabs?


    Dimitar
    Participant

    Hello Pinkishu,

    Here is our suggestion. It will work with dynamically added tabs, too:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            #jqxTabs
            {
                border-bottom-width: 0px;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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 () {
                $('#jqxTabs').jqxTabs({ width: '90%', height: 'auto', position: 'top' });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.