jQuery UI Widgets › Forums › Navigation › Tree › Adding html image after tree node

Tagged: , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Adding html image after tree node Posts
  • July 16, 2014 at 4:22 am Adding html image after tree node #57262

    nitiger
    Participant

    Is it possible to add an image directly after a tree node?

    What I’m trying to accomplish is adding folder to the tree when a user clicks an image and I want this image to reside to the right of a tree node if it is expandable.

    July 16, 2014 at 5:03 am Adding html image after tree node #57269

    Dimitar
    Participant

    Hello nitiger,

    You can customize the tree node’s HTML by setting its html property in the source object. For example, the icon for Inbox will be on the right in this code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            var source = [
                { icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                    { icon: "../../images/calendarIcon.png", label: "Calendar" },
                    { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
                },
                { html: "<em style='margin-right: 5px;'>Inbox</em><img src='../../images/folder.png' />", expanded: true, items: [
                   { icon: "../../images/folder.png", label: "Admin" },
                   { icon: "../../images/folder.png", label: "Corporate" },
                   { icon: "../../images/folder.png", label: "Finance" },
                   { icon: "../../images/folder.png", label: "Other" },
                ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" },
             ];

            // create jqxTree
            $('#jqxTree').jqxTree({ source: source, width: '250px' });
            $('#Events').jqxPanel({ height: '250px', width: '200px' });
            $('#Events').css('border', 'none');
            // on to 'expand', 'collapse' and 'select' events.
            $('#jqxTree').on('expand', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Expanded: ' + item.label + '</div>');
            });
            $('#jqxTree').on('collapse', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Collapsed: ' + item.label + '</div>');
            });
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Selected: ' + item.label + '</div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 60px;'>
            </div>
            <div style='margin-left: 20px; float: left;'>
                <div>
                    <span>Events:</span>
                    <div id='Events'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    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.