jQuery UI Menu focus Event
Last Updated :
27 Jun, 2022
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions.
The jQuery UI Menu focus event triggers when a menu gains focus or when any menu item is activated.
The menu focus event accepts two values that are listed below.
- event: It represents the event for the menu item.
- ui: It is of an object type value.
- item: It represents the currently active item.
Syntax:
- Initialize the menu with the focus callback.
$( ".selector" ).menu({
focus: function( event, ui ) {}
});- Bind an event listener to the menufocus event.
$( ".selector" ).on( "menufocus", function( event, ui ) {} );
CDN Link: First, add jQuery UI scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example: This example describes the uses of the jQuery UI menu focus event.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
.ui-menu {
width: 300px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Menu focus Event</h3>
<ul id="menu">
<li>
<div>Programming Languages</div>
<ul>
<li>
<div>C Programming</div>
</li>
<li>
<div>C++ Programming</div>
</li>
<li>
<div>Java Programming</div>
</li>
</ul>
</li>
<li>
<div>Web Technology</div>
<ul>
<li>
<div>HTML</div>
</li>
<li>
<div>CSS</div>
</li>
<li>
<div>JavaScript</div>
</li>
</ul>
</li>
<li>
<div>Computer Networks</div>
</li>
<li>
<div>Operating System</div>
</li>
</ul>
<script>
$("#menu").menu();
$("#menu").on('menufocus', function () {
alert('Focus event Triggered!');
});
</script>
</body>
</html>
Output:
Reference: https://api.jqueryui.com/menu/#event-focus
Similar Reads
jQuery UI Selectmenu focus Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI selectmenu widget can provide us with select options. We can use this widget to make a form for different actions. The
2 min read
jQuery UI Menu blur Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu blur event triggers when
2 min read
jQuery UI Dialog focus Event The Dialog box is the way to inform the user about something. It is a nice way to popup on the user window to show the information that will happen in the next or any kind of information the developer wants to clarify to the user should know. jQueryUI dialog method is used to create a basic dialog w
2 min read
jQuery UI Menu create Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu creates event triggers wh
2 min read
jQuery UI Menu select Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI menu select event is used trig
2 min read