JSON menu images - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: icon, image, jqxMenu, json, Menu, picture, text

This topic contains 2 replies, has 2 voices, and was last updated by ashensugar 11 years, 1 month ago.

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

Author

JSON menu images Posts

October 7, 2013 at 2:32 pm 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();

October 8, 2013 at 6:34 am 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/

October 16, 2013 at 10:31 am JSON menu images #30823

ashensugar

Participant

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

Author

Posts

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

You must be logged in to reply to this topic.