LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


itemhover(e)

Occurs when mouse cursor hovers over item space in TreeView component.

Event Data

ParamTypeDetails
eObjectAn event object which contains the item

Remarks

This event can be handled by binding the 'itemhover' event to the TreeView widget object.

If hoverSelection property value is set to true, whenever mouse cursor hovers over item header, the item can become selected.

Version Information

Supported in: v1.0.

Example

The following example shows how to handle the itemhover event in TreeView widget. Whenever an item is hovered, the console log will display a message stating over which item the mouse cursor is currently positioned.

$(document).ready(function() {

// Create an instance of TreeView widget

var $tree = $('#treeview').treeview();

 

// Create a handler to the itemhover event

$tree.on({

"itemhover": function(e){

console.log("itemhover event was fired when " + e.object.text + " is hovered");

});

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>

</head>

<body>

<div id="treeview" class="widget">

<ul>

<li><span>Item1</span></li>

<li><span>Item2</span>

<ul>

<li><span>Item21</span></li>

<li>><span>Item22</span></li>

<li data-expanded=false><span>Item23</span></li>

<ul>

<li><span>Item231</span></li>

<li data-expanded=false><span>Item232</span>

<ul>

<li><span>Item2321</span></li>

<li><span>Item2322</span></li>

</ul>

</li>

<li><span>Item233</span></li>

</ul>

</li>

<li><span>Item24</span></li>

</ul>

</li>

<li data-expanded=false><span>Item3</span></li>

<ul>

<li><span>Item31</span></li>

<li><span>Item32</span></li>

<li><span>Item33</span></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

Samples

See Also