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

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Tabs with no content (only for selection) Posts
  • October 24, 2014 at 3:16 pm Tabs with no content (only for selection) #61605

    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?

    October 27, 2014 at 7:07 am Tabs with no content (only for selection) #61643

    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/

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

You must be logged in to reply to this topic.