JqueryUI - Menu
A menu widget usually consists of a main menu bar with pop up menus. Items in pop up menus often have sub pop up menus. A menu can be created using the markup elements as long as the parent-child relation is maintained (using <ul> or <ol>). Each menu item has an anchor element.
The Menu Widget in jQueryUI can be used for inline and popup menus, or as a base for building more complex menu systems. For example, you can create nested menus with custom positioning.
jQueryUI provides menu() methods to create a menu.

Syntax

The menu() method can be used in two forms −

$(selector, context).menu (options) Method
$(selector, context).menu ("action", params) Method

$ (selector, context).menu (options) Method

The menu (options) method declares that an HTML element and its contents should be treated and managed as menus. The options parameter is an object that specifies the appearance and behavior of the menu items involved.

Syntax

$(selector, context).menu (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).menu({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

Sr.No.	Option & Description
1	disabled This option if set to true disables the menu. By default its value is false.
2	icons This option sets the icons for submenus. By default its value is { submenu: "ui-icon-carat-1-e" }.
3	menus This option is a selector for the elements that serve as the menu container, including sub-menus. By default its value is ul.
4	position This option sets the position of submenus in relation to the associated parent menu item. By default its value is { my: "left top", at: "right top" }.
5	role This option is used to customize the ARIA roles used for the menu and menu items. By default its value is menu.

Default Functionality

The following example demonstrates a simple example of menu widget functionality, passing no parameters to the menu() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file menuexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example, you can see a themeable menu with mouse and keyboard interactions for navigation.

Use of icons and position

The following example demonstrates the usage of two options icons, and position in the menu function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file menuexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example, you can see we have applied an icon image for the submenu list and also changed the submenu position.

$ (selector, context).menu ("action", params) Method

The menu ("action", params) method can perform an action on menu elements, such as enabling/disabling the menu. The action is specified as a string in the first argument (e.g., "disable" disables the menu). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).menu ("action", params);;

The following table lists the different actions that can be used with this method −

Sr.No.	Action & Description
1	blur( [event ] ) This action removes the focus from a menu. It triggers the menu's blur event by resetting any active element style. Where event is of type Event and represents what triggered the menu to blur.
2	collapse( [event ] ) This action closes the current active sub-menu. Where event is of type Event and represents what triggered the menu to collapse.
3	collapseAll( [event ] [, all ] ) This action closes all the open submenus.
4	destroy() This action removes menu functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
5	disable() This action disables the menu. This method does not accept any arguments.
6	enable() This action enables the the menu. This method does not accept any arguments.
7	expand( [event ] ) This action opens the sub-menu below the currently active item, if one exists. Where event is of type Event and represents what triggered the menu to expand.
8	focus( [event ], item ) This action activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event. Where event is of type Event and represents what triggered the menu to gain focus. and item is a jQuery object representing the menu item to focus/activate.
9	isFirstItem() This action returns a boolean value, which states if the current active menu item is the first menu item. This method does not accept any arguments.
10	isLastItem() This action returns a boolean value, which states if the current active menu item is the last menu item. This method does not accept any arguments.
11	next( [event ] ) This action delegates the active state to the next menu item. Where event is of type Event and represents what triggered the focus to move.
12	nextPage( [event ] ) This action moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. Where event is of type Event and represents what triggered the focus to move.
13	option( optionName ) This action gets the value currently associated with the specified optionName. Where optionName is of type String and represents the name of the option to get.
14	option() This action gets an object containing key/value pairs representing the current menu options hash.
15	option( optionName, value ) This action sets the value of the menu option associated with the specified optionName. Where optionName is of type String and represents name of option to set and value is of type Object and represents value to set for the option.
16	option( options ) This action sets one or more options for the menu. Where options is of type Object and represents a map of option-value pairs to set.
17	previous( [event ] ) This action moves active state to previous menu item. Where event is of type Event and represents what triggered the focus to move.
18	previousPage( [event ] ) This action moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable. Where event is of type Event and represents what triggered the focus to move.
19	refresh() This action initializes sub-menus and menu items that have not already been initialized. This method does not accept any arguments.
20	select( [event ] ) This action selects the currently active menu item, collapses all sub-menus and triggers the menu's select event. Where event is of type Event and represents what triggered the selection.
21	widget() This action returns a jQuery object containing the menu. This method does not accept any arguments.

The following examples demonstrate how to use the actions given in the above table.

Use of disable method

The following example demonstrates the use of disable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-3" ).menu();
            $( "#menu-3" ).menu("disable");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-3">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Use of focus and collapseAll methods

The following example demonstrates the use of focus() and collapseAll methods.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu(
               "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-4">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

Let us save the above code in an HTML file menuexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
In the above example, you can see the focus is on the last menu item. Now expand the submenu and when the mouse leaves the submenu, the submenu is closed.

Event Management on menu elements

In addition to the menu (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

Sr.No.	Event Method & Description
1	blur(event, ui) This event is triggered when a menu loses focus.
2	create(event, ui) This event is triggered when a menu is created.
3	focus(event, ui) This event is triggered when a menu gains focus or when any menu item is activated.
4	select(event, ui) This event is triggered when a menu item is selected.

Example

The following example demonstrates the event method usage for menu widget functionality. This example demonstrates the use of event create, blur and focus.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-5" ).menu({
               create: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Create event<br>" );
               },
               blur: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Blur event<br>" );
               },
               focus: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "focus event<br>" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-5">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
      <span id = "result"></span>
   </body>
</html>

JqueryUI - Dialog

Dialog boxes are one of the nice ways of presenting information on an HTML page. A dialog box is a floating window with a title and content area. This window can be moved, resized, and of course, closed using "X" icon by default.
jQueryUI provides dialog() method that transforms the HTML code written on the page into HTML code to display a dialog box.

Syntax

The dialog() method can be used in two forms −

$(selector, context).dialog (options) Method
$(selector, context).dialog ("action", [params]) Method

$ (selector, context).dialog (options) Method

The dialog (options) method declares that an HTML element can be administered in the form of a dialog box. The options parameter is an object that specifies the appearance and behavior of that window.

Syntax

$(selector, context).dialog(options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).dialog({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

Sr.No.	Option & Description
1	appendTo If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is true.
2	autoOpen This option unless set to false, the dialog box is opened upon creation. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.
3	buttons This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}.
4	closeOnEscape Unless this option set to false, the dialog box will be closed when the user presses the Escape key while the dialog box has focus. By default its value is true.
5	closeText This option contains text to replace the default of Close for the close button. By default its value is "close".
6	dialogClass If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is "".
7	draggable Unless you this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.
8	height This option sets the height of the dialog box. By default its value is "auto".
9	hide This option is used to set the effect to be used when the dialog box is closed. By default its value is null.
11	maxHeight This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.
12	maxWidth This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.
13	minHeight This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.
14	minWidth This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.
15	modal If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements. By default its value is false.
16	position This option specifies the initial position of the dialog box. Can be one of the predefined positions: center (the default), left, right, top, or bottom. Can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as ['right','top']. By default its value is { my: "center", at: "center", of: window }.
17	resizable This option unless set to false, the dialog box is resizable in all directions. By default its value is true.
18	show This option is an effect to be used when the dialog box is being opened. By default its value is null.
20	title This option specifies the text to appear in the title bar of the dialog box. By default its value is null.
21	width This option specifies the width of the dialog box in pixels. By default its value is 300.

The following section will show you a few working examples of dialog functionality.

Default functionality

The following example demonstrates a simple example of dialog functionality passing no parameters to the dialog() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of buttons, title and position

The following example demonstrates the usage of three options buttons, title and position in the dialog widget of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

Use of hide, show and height

The following example demonstrates the usage of three options hide, show and height in the dialog widget of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

Use of Modal

The following example demonstrates the usage of three options buttons, title and position in the dialog widget of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

$ (selector, context).dialog ("action", [params]) Method

The dialog (action, params) method can perform an action on the dialog box, such as closing the box. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.

Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.

Syntax

$(selector, context).dialog ("action", [params]);

The following table lists the actions for this method −

Sr.No.	Action & Description
1	close() This action closes the dialog box. This method does not accept any arguments.
2	destroy() This action removes the dialog box competely. This will return the element back to its pre-init state. This method does not accept any arguments.
3	isOpen() This action checks if the dialog box is open. This method does not accept any arguments.
4	moveToTop() This action positions the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments.
5	open() This action opens the dialog box. This method does not accept any arguments.
6	option( optionName ) This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get.
7	option() This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments.
8	option( optionName, value ) This action sets the value of the dialog option associated with the specified optionName.
9	option( options ) This action sets one or more options for the dialog.
10	widget() This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of isOpen(), open() and close() methods.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Event Management on Dialog Box

In addition to the dialog (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below −

Sr.No.	Event Method & Description
1	beforeClose(event, ui) This event is triggered when the dialog box is about to close. Returning false prevents the dialog box from closing. It is handy for dialog boxes with forms that fail validation. Where event is of type Event, and ui is of type Object.
2	close(event, ui) This event is triggered when the dialog box is closed. Where event is of type Event, and ui is of type Object.
3	create(event, ui) This event is triggered when the dialog box is created. Where event is of type Event, and ui is of type Object.
4	drag(event, ui) This event is triggered repeatedly as a dialog box is moved about during a drag. Where event is of type Event, and ui is of type Object.
5	dragStart(event, ui) This event is triggered when a repositioning of the dialog box commences by dragging its title bar. Where event is of type Event, and ui is of type Object.
6	dragStop(event, ui) This event is triggered when a drag operation terminates. Where event is of type Event, and ui is of type Object.
7	focus(event, ui) This event is triggered when the dialog gains focus. Where event is of type Event, and ui is of type Object.
8	open(event, ui) This event is triggered when the dialog box is opened. Where event is of type Event, and ui is of type Object.
9	resize(event, ui) This event is triggered repeatedly as a dialog box is resized. Where event is of type Event, and ui is of type Object.
10	resizeStart(event, ui) This event is triggered when a resize of the dialog box commences. Where event is of type Event, and ui is of type Object.
11	resizeStop(event, ui) This event is triggered when a resize of the dialog box terminates. Where event is of type Event, and ui is of type Object.

The following examples demonstrate the use of the events listed in the above table.

Use of beforeClose Event method

The following example demonstrates the use of beforeClose event method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
        autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript,

15 January, 2019

JqueryUI - Menu

Syntax

$ (selector, context).menu (options) Method

Syntax

Default Functionality

Use of icons and position

$ (selector, context).menu ("action", params) Method

Syntax

Use of disable method

Use of focus and collapseAll methods

Event Management on menu elements

Example

JqueryUI - Dialog

JqueryUI - Dialog

Syntax

$ (selector, context).dialog (options) Method

Syntax

Default functionality

Use of buttons, title and position

Use of hide, show and height

Use of Modal

$ (selector, context).dialog ("action", [params]) Method

Syntax

Example

Event Management on Dialog Box

Use of beforeClose Event method

Meta

Popular Posts

Categories

Social Media Links

Pages

Blog Archive

Data Publish News

Al Jazeera – Breaking News, World News and Video from Al Jazeera

Laravel News