jQuery UI Widgets Forums Navigation Menu, Context Menu Imaged menu via JSON

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 7 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Imaged menu via JSON #4547

    nicklegao
    Member

    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.

    Imaged menu via JSON #4568

    Peter Stoev
    Keymaster

    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

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

You must be logged in to reply to this topic.