jQWidgets Forums

Tagged: jqxMenu, jqxsplitter, jqxTabs, Menu, splitter, Tabs

This topic contains 4 replies, has 3 voices, and was last updated by bruthe 11 years, 4 months ago.

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

Author

How to find a tab based in the tab title? Posts

October 4, 2012 at 9:04 pm How to find a tab based in the tab title? #8938

SushmaSriram

Member

Hi Team,

I have a vertical menu on the left part of a splitter and tab on the right part of the splitter.

On clicking the menu item, based on the menu item name, a new tab has to be added (if it does not already exist) and if the tab exists the content has to be replaced.

Could you please support me with an example on this.

Thanks,
Sushma

October 5, 2012 at 7:10 am How to find a tab based in the tab title? #8956

Dimitar

Participant

Hello Sushma,

Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link type="text/css" rel="Stylesheet" href="jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="scripts/jquery-1.8.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" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#jqxsplitter").jqxSplitter({ width: 700, height: 400, panels: [{size: 250}, {size: 450}] });
        $("#jqxmenu").jqxMenu({ width: 120, height: 150, mode: 'vertical' });
        $("#jqxtabs").jqxTabs({ width: 400, height: 300 });
        $('#jqxmenu').bind('itemclick', function (event) {
         switch (event.target.innerHTML)
         {
         case "First":
             $('#jqxtabs').jqxTabs('removeAt', 0);
             $('#jqxtabs').jqxTabs('addAt', 0, "First", "Updated content");
             break;
         case "Second":
             $('#jqxtabs').jqxTabs('removeAt', 1);
             $('#jqxtabs').jqxTabs('addAt', 1, "Second", "Updated content");
             break;
         case "Third":
             $('#jqxtabs').jqxTabs('removeAt', 2);
             $('#jqxtabs').jqxTabs('addAt', 2, "Third", "Updated content");
             break;
         };
         });
    });
    </script>
</head>
<body>
    <div id="jqxsplitter">
        <div id="left">
            <div id="jqxmenu">
                <ul>
                    <li>First</li>
                    <li>Second</li>
                    <li>Third</li>
                </ul>
            </div>
        </div>
        <div id="right">
            <div id='jqxtabs'>
                <ul style='margin-left: 20px;'>
                    <li>Tab 1</li>
                    <li>Tab 2</li>
                </ul>
                <div>
                    Initial content 1
                </div>
                <div>
                    Initial content 2
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 5, 2012 at 10:56 am How to find a tab based in the tab title? #8976

SushmaSriram

Member

Hi Dimitar,

This looks fine.. But I may have 10 to 15 tabs.. so could you please let me know if I can get the position of the tab based on the tab title.

Thanks,
Sushma

October 8, 2012 at 5:35 am How to find a tab based in the tab title? #9026

Dimitar

Participant

Hi Sushma,

In that case, this code snippet should do the job.

            var tabsCount = $("#jqxtabs").jqxTabs('length');
            var position;
            for (var i = 0; i < tabsCount; i++) {
                var tabTitle = $("#jqxtabs").jqxTabs('getTitleAt', i);
                if (tabTitle == "First") {
                    position = i;
                    break;
                };
            };

The position variable gets the position of the tab with the given title.

Best Regards,
Dimitar

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

December 18, 2013 at 4:05 am How to find a tab based in the tab title? #46668

bruthe

Participant

Dimitar,cool!
i have find the way ,thank you

Author

Posts

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

You must be logged in to reply to this topic.