jQuery UI Widgets Forums Navigation Menu, Context Menu How to make menu on click not on select..

This topic contains 2 replies, has 2 voices, and was last updated by  shiva112 11 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • How to make menu on click not on select.. #15614

    shiva112
    Member

    Hello, i have created a main screen but the menu loads tabs on select, not on click. So if a want to open the same tab i first have to click a random tab and then the tab i want to open again. Is it possible to make the menu work on click? How can i do this?

    Kind Regards
    Shiva Traanman

    How to make menu on click not on select.. #15668

    Dimitar
    Participant

    Hello Shiva Traanman,

    You should bind to the ‘itemclick’ jqxMenu event. Here is an example on the matter.

    <!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create a jqxMenu
    $("#jqxMenu").jqxMenu({ width: '200', height: '30px' });
    $("#jqxMenu").on('itemclick', function (event) {
    var i = event.args.innerHTML;
    var t;
    switch (i) {
    case "First":
    t = 0;
    break;
    case "Second":
    t = 1;
    break;
    case "Third":
    t = 2;
    break;
    };
    $('#jqxtabs').jqxTabs('select', t);
    });
    $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
    });
    </script>
    </head>
    <body>
    <div id='content'>
    <div id='jqxMenu'>
    <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>
    </div>
    <br />
    <div id='jqxtabs'>
    <ul style='margin-left: 20px;'>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    </ul>
    <div>
    Content 1
    </div>
    <div>
    Content 2
    </div>
    <div>
    Content 3
    </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.