jQuery UI Widgets Forums Navigation Menu, Context Menu JSON menu images

This topic contains 2 replies, has 2 voices, and was last updated by  ashensugar 6 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • JSON menu images #30362

    ashensugar
    Participant

    Hi again, I’m using the jqxMenu widget to display my lessons hierarchy.

    Some specific elements of my hierarchy have an icon to display.

    Everything worked fine until now, but I have a problem including my icons to the menu :

    The only example on images in menu suggests to add to our list elements.

    As I’m using json, I won’t be able to use that method. Is there any other way to include these icons ? (Best would be like in jqTree with a “icon” field, but anything that works is good for me).

    Here’s the main part of my menu code :

    	var settings = {
    loadComplete:function(records){
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'},{name:"num", map:'num'}]);
    $('#menuW').jqxMenu({ source: records, height: 30, theme: "ui-start", autoSizeMainItems: true });
    }
    };
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' },
    { name: 'subMenuWidth'},
    { name: 'value' },
    { name: 'icon'},
    { name: 'num'},
    { name: 'type'}
    ],
    id:'id',
    url:"backoffice/get_parcours.php?id_parcours="+id_parcours+"&menu=1"
    }
    var dataAdapter = new $.jqx.dataAdapter(source, settings);
    dataAdapter.dataBind();
    JSON menu images #30400

    Dimitar
    Participant

    Hello ashensugar,

    The text field of the JSON source accepts HTML code, including images. Please check out this example based on the demo JSON Menu:

    <!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/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxmenu.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var data = [
    {
    "id": "12",
    "text": "<img style='float: left; margin-right: 5px;' src='../../images/folder.png' />Frappuccino",
    "parentid": "-1",
    "subMenuWidth": '250px'
    },
    {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "subMenuWidth": '250px'
    }, {
    "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
    }, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
    }, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
    }, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
    }, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1",
    "subMenuWidth": '200px'
    }, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
    }, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
    }, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
    }, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
    }, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
    }, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
    }, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
    }, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
    }, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
    }, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12"
    }]
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' },
    { name: 'subMenuWidth' }
    ],
    id: 'id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
    // specifies the mapping between the 'text' and 'label' fields.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });
    $("#jqxWidget").on('itemclick', function (event) {
    $("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text());
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    JSON menu images #30823

    ashensugar
    Participant

    I applied this, worked like a charm. Thx again Dimitar

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

You must be logged in to reply to this topic.