Imaged menu via JSON

[nicklegaoMember]

Hi there,

I’d like to generate a menu with images dynamically, the data is from JSON. However, I couldn’t find a demo for it.

Can you please give me a example for setting the image url? And I also want to define a url for clicking the menu item.

Cheers,
Nick.

[Peter StoevKeymaster]

Hi Nick,

You can initialize the jqxMenu with images by using the following syntax:

var source = [
    { html: "<img src='../../images/mailIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Mail</span>", items: [
        { html: "<img src='../../images/calendarIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Calendar</span>" },
        { html: "<img src='../../images/contactsIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Contacts</span>" }
    ]
    },
    { html: "<img src='../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Inbox</span>", items: [
        { html: "<img src='../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Admin</span>" },
        { html: "<img src='../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Corporate</span>" },
        { html: "<img src='../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Finance</span>" },
        { html: "<img src='../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Other</span>" }
    ]
    }
];
// create jqxMenu
$("#jqxMenu").jqxMenu({ source: source, width: '200', height: '33px', theme: theme });

The ‘html’ field allows you to put any HTML inside the Menu Items.

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts