LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


tabhover(e)

Occurs when mouse cursor hovers over tab header in TabStrip.

Event Data

ParamTypeDetails
eObjectAn event object which contains the tab

Remarks

This event can be handled by binding the 'tabhover' event to the TabStrip widget object.

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

Version Information

Supported in: v1.0.

Example

The following example shows how to handle the tabhover event in TabStrip widget. Whenever a tab header is hovered, the console log will display a message stating over which tab the mouse cursor is currently present.

$(document).ready(function() {

// Create an instance of TabStrip widget

var $bar = $('#tabstrip').tabstrip();

 

// Create a handler to the tabhover event

$bar.on({

"tabhover": function(e){

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

});

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.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.tabstrip.min.js"></script>

</head>

<body>

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

    <li><span>Tab 1</span></li>

    <li><span>Tab 2</span></li>

    <li><span>Tab 3</span></li>

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

Samples

See Also