jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 5 months ago.

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

Author

jqxMenu: click action Posts

December 19, 2014 at 5:51 pm jqxMenu: click action #64498

k1mgy

Participant

I am defining my jqxMenu in Javascript, using the source parameter:

  var source = [
            { label: "Home"},
            { label: "Item 1", expanded: true, items: [
                { label: "Item 1.1" },
                { label: "Item 1.2", selected: true }
            ]
            },
            { label: "Item 2" },
            { label: "Item 3" },
            { label: "Item 4", items: [
                { label: "Item 4.1" },
                { label: "Item 4.2" }
            ]
            },
            { label: "Item 5" },
            { label: "Item 6" },
            { label: "Item 7" }
        ];        
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ source:source, width: 360, height: 30, theme:'energyblue'});
           });

However.. I cannot seem to find a method that will perform an action when a menu item is selected. For example, I’d like this item:
{ label: “Home”}, to load the index page. Perhaps: { label: “Home”, url: “index.php”}, but nothing happens.

Looking at the API I see the html property, but no example as to how it can be used.

Perhaps I am missing something fundamental here… and if so, please go gently on me.

December 22, 2014 at 11:16 am jqxMenu: click action #64544

Nadezhda

Participant

Hello k1mgy,

Here is an example which shows how to load page after click on item.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxMenu
            var source = [
            {               
                html: "<a href='http://www.jqwidgets.com/' target='_blank' type='text/html'>Home</a>"
            },
            {
                label: "Item 1", expanded: true, items: [
                  { label: "Item 1.1" },
                  { label: "Item 1.2", selected: true }
                ]
            },
            { label: "Item 2" },
            { label: "Item 3" },
            {
                label: "Item 4", items: [
                  { label: "Item 4.1" },
                  { label: "Item 4.2" }
                ]
            },
            { label: "Item 5" },
            { label: "Item 6" },
            { label: "Item 7" }
            ];
            // create jqxMenu    
            $("#jqxMenu").jqxMenu({ source: source, width: '360px', height: '30px' });
            $("#jqxMenu").css('visibility', 'visible');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxMenu' style='visibility: hidden; float: left;'>
    </div>    
</body>
</html>

Best Regards,
Nadezhda

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.