jQuery UI Widgets Forums Navigation Tree Get tree node on mouse over

This topic contains 6 replies, has 2 voices, and was last updated by  abc 11 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Get tree node on mouse over #14709

    abc
    Participant

    Hi,

    How to get tree node just on mouse over of that tree node(Not after selecting the node, only on mouse over) ?

    is it possible?

     

    Get tree node on mouse over #14724

    Dimitar
    Participant

    Hello abcd,

    Here is how to do it:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree can easily display images next to each item. In order to achieve that, you need to add 'img' element inside a 'li' element." />
    <title id='Description'>The jqxTree in this demo displays images next to the tree items.
    </title>
    <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.8.2.min.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" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ theme: theme });
    // Create jqxExpander
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    $("#jqxTree .jqx-tree-item").mouseenter(function (event) {
    var item = event.toElement.parentElement;
    var text = event.toElement.innerText;
    alert(text);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxExpander'>
    <div>
    Folders</div>
    <div id='jqxTree'>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
    item-title="true">Mail</span>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
    item-title="true">Calendar</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
    item-title="true">Contacts</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">jQWidgets</span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Admin</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Corporate</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Finance</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Other</span> </li>
    </ul>
    </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Personal</span> </li>
    </ul>
    </li>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Today</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Week</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Month</span> </li>
    </ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
    item-title="true">Notes</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
    item-title="true">Settings</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
    item-title="true">Favorites</span> </li>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Get tree node on mouse over #14726

    abc
    Participant

    Hi Dimitar,

    I have tried this code, but it giving me an error – “TypeError: event.toElement is undefined”

    Get tree node on mouse over #14727

    Dimitar
    Participant

    Hi abcd,

    Could you, please, provide us with more information, such as the jQWidgets and browser versions you are using.

    Best Regards,
    Dimitar

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

    Get tree node on mouse over #14731

    abc
    Participant

    Hi Dimitar,

    I’m using
    Mozilla Firefox version 18.0.1 and
    JqWidget version 2.5

    Get tree node on mouse over #14732

    Dimitar
    Participant

    Hi abcd,

    It seems Firefox does not support toElement. Here is a better solution:

                $("#jqxTree .jqx-tree-item").mouseenter(function (event) {
    var item = event.target.parentElement;
    var text = event.target.textContent;
    var text2 = text.replace(/\s+/g, ' ');
    alert(text2);
    });

    Best Regards,
    Dimitar

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

    Get tree node on mouse over #14738

    abc
    Participant

    Thank You So much Dimitar

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

You must be logged in to reply to this topic.