Class: ojMenu

Oracle® Fusion Middleware Oracle JavaScript Extension Toolkit (JET)
12c (12.1.4)
E54107-01

QuickNav

Options

Events

Methods


Non-public methods (internal use only)

oj. ojMenu extends oj.baseComponent

Description: Themeable, WAI-ARIA-compliant menu with mouse and keyboard interactions for navigation.

A JET Menu can be created from any valid markup as long as the elements have a strict parent/child relationship and each menu item has an anchor. The most commonly used element is the unordered list ( <ul> ): 

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

If you use a structure other than <ul>/<li>, including using the same element for the menu and the menu items, use the menuSelector option to specify a way to differentiate the two elements, e.g., menuSelector: "div.menuElement".

Any menu item can be disabled by adding the oj-disabled class to that element. As with any DOM change, doing so post-init requires a refresh() of the component.

Icons

The submenu icon can be customized via theming.

To add other icons to menu items, include them in the markup: 

<ul id="menu">
  <li id="foo"><a href="#"><span class="oj-menu-item-icon demo-icon-font demo-palette-icon"></span>Foo</a></li>
</ul>

Dividers

Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes, or nothing at all: 

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li>---</li>
  <li><a href="#">Item 2</a></li>
</ul>

For WAI-ARIA compliance, JET automatically adds role="separator" to the divider element.

Keyboard interaction

Key Use
Enter or Space Invoke the focused menu item's action, which may be opening a submenu.
UpArrow Move focus to the previous menu item, wrapping around at the top.
DownArrow Move focus to the next menu item, wrapping around at the bottom.
RightArrow (LeftArrow in RTL) Open the submenu, if available.
LeftArrow (RightArrow in RTL) Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
Esc Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
Home Move focus to the first menu item.
End Move focus to the last menu item.

Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.

Note that the "Search for text when I start typing" feature in Firefox can interfere with web content that accepts keystrokes, such as this "type a letter" feature of JET Menu.

Disabled items can receive keyboard focus, but do not allow any other interaction.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the menu must be refresh()ed.

Pseudo-selectors

The :oj-menu pseudo-selector can be used in jQuery expressions to select JET Menus. For example: 

$( ":oj-menu" ) // selects all JET Menus on the page
$myEventTarget.closest( ":oj-menu" ) // selects the closest ancestor that is a JET Menu

Declarative Binding

For components like Menu and Buttonset that contain a number of like items, applications may wish to use a foreach Knockout binding to stamp out the contents. This binding cannot live on the same node as the JET ojComponent binding, and must instead live on a nested virtual element as follows: 

<ul id="menu" data-bind="ojComponent: {component: 'ojMenu'}">
    <!-- ko foreach: menuItems -->
        <li data-bind="attr: {id: id}, css: {'oj-disabled': disabled}">
            <a href="#" data-bind="text: label"></a>
        </li>
    <!-- /ko -->
</ul>

JET for jQuery UI developers

  1. All JQUI and JET components inherit disable() and enable() methods from the base class. This API duplicates the functionality of the disabled option. In JET, to keep the API as lean as possible, we have chosen not to document these methods outside of this section.
  2. JQUI Menu has menus and position options. For clarity, these options have been renamed to menuSelector and submenuPosition in JET Menu.
  3. JQUI Menu has a role option, which defaults to "menu". This option was removed in JET Menu. Reason: JET Menu is a menu component; thus we feel that the only appropriate WAI-ARIA role for our component is "menu".
  4. JQUI Menu has isFirstItem() and isLastItem() methods, which were removed in JET Menu. Reason: To keep the API lean, we prefer to avoid methods with such specific functionality.
  5. JQUI Menu has nextPage() and previousPage() methods, which were removed in JET Menu. Reason: In JET we wish to promote best design practices. Menus with scrollbars are considered undesirable UX.
  6. JET Menu swaps the functionality of the left and right arrow keys in RTL.
  7. JET Menu creates WAI-ARIA compliant separator elements, by applying role="separator" to them.

Also, event names for all JET components are prefixed with "oj", instead of component-specific prefixes like "menu" or "button". E.g. the JQUI menucreate event is ojcreate in JET, as shown in the doc for that event. Reason: This makes the API more powerful. It allows apps to listen to "foo" events from all JET components via: 

$( ".selector" ).on( "ojfoo", myFunc);
or to "foo" events only from JET Menus (the JQUI functionality) via: 
$( ".selector" ).on( "ojfoo", ":oj-menu", myFunc);

Initializer

.ojMenu(options)

Creates a JET Menu. If called after the menu is already created, it is equivalent to the "set many options" overload of option().
Parameters:
Name Type Argument Description
options Object <optional>
 a map of option-value pairs to set on the component
Source:
Examples

Initialize the menu with no options specified:

$( ".selector" ).ojMenu();

Initialize the menu with some options and callbacks specified:

$( ".selector" ).ojMenu( { "disabled": true, "create": function( event, ui ) {} } );

Initialize the menu via the JET ojComponent binding:

<ul id="menu" data-bind="ojComponent: { component: 'ojMenu', 
                                        disabled: true, 
                                        select: menuItemSelect }">

Options

#contextMenu :Object

JQ selector identifying the JET Menu that the component should launch as a context menu on right-click or Shift-F10. If specified, the browser's native context menu will be replaced by the specified JET Menu.

To specify a JET context menu on a DOM element that is not a JET component, see the ojContextMenu binding.

To make the page semantically accurate from the outset, applications are encouraged to specify the context menu via the standard HTML5 syntax shown in the below example. When the component is initialized, the context menu thus specified will be set on the component.

The JET Menu should be initialized before any component using it as a context menu.

Default Value:
  • null
Inherited From:
Source:
Examples

Initialize a JET component with a context menu:

// via recommended HTML5 syntax:
<div id="myComponent" contextmenu="myMenu" data-bind="ojComponent: { ... }>

// via JET initializer (less preferred) :
$( ".selector" ).ojFoo({ "contextMenu": "#myMenu" });

Get or set the contextMenu option, after initialization:

// getter
var menu = $( ".selector" ).ojFoo( "option", "contextMenu" );

// setter
$( ".selector" ).ojFoo( "option", "contextMenu", ".my-marker-class" );

Set a JET context menu on an ordinary HTML element:

<a href="#" id="myAnchor" contextmenu="myMenu" data-bind="ojContextMenu: {}">Some text

#disabled :boolean

Disables the menu if set to true.
Default Value:
  • false
Source:
Examples

Initialize the menu with the disabled option specified:

$( ".selector" ).ojMenu( { "disabled": true } );

Get or set the disabled option, after initialization:

// getter
var disabled = $( ".selector" ).ojMenu( "option", "disabled" );

// setter
$( ".selector" ).ojMenu( "option", "disabled", true );
Identifies the position of this menu when launched via the show() method or via menu button or context menu functionality.

By default, the menu is positioned relative to the launching event if that event is a right-click mouse event, and the launcher element otherwise. Both of those items are passed to the show() method. This behavior is appropriate for context menus and menu buttons. If a value is set on the of field, then the menu is positioned relative to that element or position instead.

Please refer to the jQuery UI Position utility for more details about the various choices.

See also show() for more details.

Default Value:
  • { "my": "left top", "at": "left bottom" }
Source:
Examples

Initialize the menu with the menuPosition option specified:

$( ".selector" ).ojMenu({ menuPosition: { "my": "left top", "at": "right-5 top+5" } });

Get or set the menuPosition option, after initialization:

// getter
var position = $( ".selector" ).ojMenu( "option", "menuPosition" );
 
// setter
$( ".selector" ).ojMenu( "option", "menuPosition", { "my": "left top", "at": "right-5 top+5" } );
Selector for the elements that serve as the menu container, including submenus.

Note: The menuSelector option should not be changed after initialization. Existing submenus will not be updated.

Default Value:
  • "ul"
Source:
Examples

Initialize the menu with the menuSelector option specified:

$( ".selector" ).ojMenu({ menuSelector: "div" });

Get the menuSelector option, after initialization:

// getter
var menuSelector = $( ".selector" ).ojMenu( "option", "menuSelector" );

#rootAttributes :Object|undefined

Attributes specified here will be set on the component's root DOM element at creation time. This is particularly useful for components like Dialog that wrap themselves in a root element at creation time.

The specified class and style are appended to the current class and style, respectively. All other attributes overwrite any existing value.

Setting this option after component creation has no effect.

Default Value:
  • undefined
Inherited From:
Source:
Example

Initialize a JET component, specifying a set of attributes to be set on the component's root DOM element:

$( ".selector" ).ojFoo({ "rootAttributes": {
  'id': 'myId', 
  'style': 'max-width:100%; color:blue;', 
  'class': 'my-class'
}});
Identifies the position of submenus. By default, the submenu is positioned relative to the parent menu item, but if a value is set on the of field, then the submenu is positioned relative to that element or position instead.

Please refer to the jQuery UI Position utility for more details about the various choices.

Default Value:
  • { "my": "left top", "at": "right top" }
Source:
Examples

Initialize the menu with the submenuPosition option specified:

$( ".selector" ).ojMenu({ submenuPosition: { "my": "left top", "at": "right-5 top+5" } });

Get or set the submenuPosition option, after initialization:

// getter
var position = $( ".selector" ).ojMenu( "option", "submenuPosition" );
 
// setter
$( ".selector" ).ojMenu( "option", "submenuPosition", { "my": "left top", "at": "right-5 top+5" } );

Events

#beforeShow

Triggered before this menu is launched via the show() method or via menu button or context menu functionality. The launch can be cancelled by calling event.preventDefault().
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
launcher jQuery the launcher element that was passed to the show() method.
Source:
Examples

Initialize the menu with the beforeShow callback specified:

$( ".selector" ).ojMenu({
    "beforeShow": function( event, ui ) {}
});

Bind an event listener to the ojbeforeshow event:

$( ".selector" ).on( "ojbeforeshow", function( event, ui ) {} );

#blur

Triggered when a menu item loses focus.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
item jQuery the currently active menu item
Source:
Examples

Initialize the menu with the blur callback specified:

$( ".selector" ).ojMenu({
    "blur": function( event, ui ) {}
});

Bind an event listener to the ojblur event:

$( ".selector" ).on( "ojblur", function( event, ui ) {} );

#create

Triggered when the menu is created.
Properties:
Name Type Description
event Event jQuery event object
ui Object Empty object included for consistency with other events
Source:
Examples

Initialize the menu with the create callback specified:

$( ".selector" ).ojMenu({
    "create": function( event, ui ) {}
});

Bind an event listener to the ojcreate event:

$( ".selector" ).on( "ojcreate", function( event, ui ) {} );

#focus

Triggered when a menu gains focus or a menu item becomes active.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
item jQuery the currently active menu item
Source:
Examples

Initialize the menu with the focus callback specified:

$( ".selector" ).ojMenu({
    "focus": function( event, ui ) {}
});

Bind an event listener to the ojfocus event:

$( ".selector" ).on( "ojfocus", function( event, ui ) {} );

#select

Triggered when a menu item is selected. Applications should listen for this event, not the click event, to detect when a menu item has been selected.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
item jQuery the currently active menu item
Source:
Examples

Initialize the menu with the select callback specified:

$( ".selector" ).ojMenu({
    "select": function( event, ui ) {}
});

Bind an event listener to the ojselect event:

$( ".selector" ).on( "ojselect", function( event, ui ) {} );

Methods

#blur(event)

Removes focus from the active menu item, if any. Does not affect whether the menu itself has browser focus. Resets any active element styles and triggers the menu's blur event.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the menu item to blur. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the blur method:

$( ".selector" ).ojMenu( "blur" ) );

#collapse(event)

Closes the currently active submenu.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the menu to collapse. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the collapse method:

$( ".selector" ).ojMenu( "collapse" );

#collapseAll(event, all)

Closes some or all open submenus.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the menu to collapse. May be null. May be omitted if the all parameter is omitted.
all boolean <optional>
 Indicates whether all submenus should be closed or only submenus below and including the menu that is or contains the target of the triggering event. Defaults to false.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the collapseAll method:

$( ".selector" ).ojMenu( "collapseAll ", null, true );

#destroy()

Removes the menu functionality completely. This will return the element back to its pre-init state.

This method does not accept any arguments.

Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the destroy method:

$( ".selector" ).ojMenu( "destroy" );

#expand(event)

Opens the submenu below the currently active item, if one exists.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the menu to expand. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the expand method:

$( ".selector" ).ojMenu( "expand" );

#focus(event, item)

Activates the specified menu item and triggers the menu's focus event.
Parameters:
Name Type Description
event Event What triggered the menu item to gain focus. May be null, but may not be omitted.
item jQuery The menu item to focus/activate. Its containing submenu, if any, must already be expanded.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the focus method:

$( ".selector" ).ojMenu( "focus", null, menu.find( ".oj-menu-item:last" ) );

#getNodeBySubId(locator) → {Element|null}

Return the subcomponent node represented by the documented locator attribute values.
Parameters:
Name Type Description
locator Object An Object containing at minimum a subId property whose value is a string, documented by the component, that allows the component to look up the subcomponent associated with that string. It contains:

component: optional component name - in the future there may be more than one component contained within a page element

subId: the string, documented by the component, that the component expects in getNodeBySubId to locate a particular subcomponent.
Inherited From:
Source:
Returns:
the subcomponent located by the subId string passed in locator, if found.
Type
Element | null

#getSubIdByNode(node) → {string|null}

Return the subId string for the given child DOM node
Parameters:
Name Type Description
node Element child DOM node
Inherited From:
Source:
Returns:
- the subId for the DOM node or null when none is found
Type
string | null

#next(event)

Moves active state to next menu item.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the focus to move. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the next method:

$( ".selector" ).ojMenu( "next" );

#option(optionName, value) → {Object|undefined}

This method has several overloads, which gets and set component options.

The first overload accepts a single optionName param as a string, and returns the current value of that option.

The second overload accepts two params, an optionName string and a new value to which that option will be set.

The third overload accepts no params, and returns a map of key/value pairs representing all the component options and their values.

The fourth overload accepts a single map of option-value pairs to set on the component.

Parameters:
Name Type Argument Description
optionName string | Object <optional>
 the option name (string, first two overloads), or the map (Object, last overload). Omitted in the third overload.
value Object <optional>
 a value to set for the option. Second overload only.
Inherited From:
Source:
Returns:
The getter overloads return the retrieved value(s). When called via the public jQuery syntax, the setter overloads return the object on which they were called, to facilitate method chaining.
Type
Object | undefined
Examples

First overload: get one option:

var isDisabled = $( ".selector" ).ojFoo( "option", "disabled" ); // Foo is Button, Menu, etc.

Second overload: set one option:

$( ".selector" ).ojFoo( "option", "disabled", true ); // Foo is Button, Menu, etc.

Third overload: get all options:

var options = $( ".selector" ).ojFoo( "option" ); // Foo is Button, Menu, etc.

Fourth overload: set one or more options:

$( ".selector" ).ojFoo( "option", { disabled: true } ); // Foo is Button, Menu, etc.

#previous(event)

Moves active state to previous menu item.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the focus to move. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the previous method:

$( ".selector" ).ojMenu( "previous" );

#refresh()

Refreshes the visual state of the menu. JET components require a refresh() after the DOM is programmatically changed underneath the component. For Menu, this includes:
  • After menu items or submenus are added or removed.
  • After a change to a menu item's disabled status (which is set by applying or removing the oj-disabled class from the menu item).
  • After the reading direction (LTR vs. RTL) changes.

This method does not accept any arguments.

Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the refresh method:

$( ".selector" ).ojMenu( "refresh" );

#select(event)

Selects the currently active menu item, collapses all submenus and triggers the menu's select event.
Parameters:
Name Type Argument Description
event Event <optional>
 What triggered the selection. May be null or omitted.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the select method:

$( ".selector" ).ojMenu( "select" );

#show(event, params)

Launches this menu as a popup, after firing the beforeShow event. Listeners to that event can cancel the launch via event.preventDefault(), and can tweak menu configuration as needed, such as menuPosition.
Parameters:
Name Type Description
event Event What triggered the menu launch. May be null, but may not be omitted.
params Object.<string, string> Map including one or more of the following keys:
  • "launcher": Required. The DOM element (which may or may not be a JET component) that launched the popup menu. Focus is returned to this node upon menu dismissal. Can be the string id of the DOM node, or a jQuery object containing the node.
  • "focus": Optional; defaults to "firstItem". Values are the following strings:
    • "none": Leaves focus where it is, e.g. on the launching component (e.g. WAI-ARIA MenuButton Space/Enter behavior). Use this value if setting focus in the beforeShow listener.
    • "menu": Focuses the menu itself with no menu item focused (e.g. typical Context Menu behavior).
    • "firstItem": Focuses the first menu item (e.g. WAI-ARIA MenuButton DownArrow behavior).
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the show method:

$( ".selector" ).ojMenu( "show", myEvent, {launcher: "myElement"} );

#widget() → {jQuery}

Returns a jQuery object containing the menu.

This method does not accept any arguments.

Source:
Returns:
the menu
Type
jQuery
Example

Invoke the widget method:

var widget = $( ".selector" ).ojMenu( "widget" );

Non-public Methods

Note: Extending JET components is not currently supported. Thus, non-public methods are for internal use only.

<protected> #_AfterCreate()

This method is called after _ComponentCreate. The JET base component does tasks here that must happen after the component (subclass) has created itself in its override of _ComponentCreate. Notably, the base component handles the rootAttributes and contextMenu options here, since those options operate on the component root node, which for some components is created in their override of _ComponentCreate.

Subclasses should override this method only if they have tasks that must happen after a superclass's implementation of this method, e.g. tasks that must happen after the context menu is set on the component.

Overrides of this method should call this._super first.

Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_ComponentCreate()

All component create-time initialization lives in this method, except the logic that specifically needs to live in _InitOptions or _AfterCreate, per the documentation for those methods. All DOM creation must happen here, since the intent of _AfterCreate is to contain superclass logic that must run after that DOM is created.

Overrides of this method should call this._super first.

Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_GetReadingDirection() → {string}

Determines whether the component is LTR or RTL.

Component responsibilities:

  • All components must determine directionality exclusively by calling this protected superclass method. (So that any future updates to the logic can be made in this one place.)
  • Components that need to know the directionality must call this method from _create() and refresh(), and cache the value.
  • Components should not call this at other times, and should instead use the cached value. (This avoids constant DOM queries, and avoids any future issues if directional islands and component reparenting (e.g. popups) should coexist.)

App responsibilities:

  • The app specifies directionality by setting the HTML "dir" attribute on the <html> node. When omitted, the default is "ltr". (Per-component directionality / directional islands are not currently supported due to inadequate CSS support.)
  • As with any DOM change, the app must refresh() the component if the directionality changes dynamically. (This provides a hook for component housekeeping, and allows caching.)
Default Value:
  • "ltr"
Inherited From:
Source:
Returns:
the reading direction, either "ltr" or "rtl"
Type
string

<protected> #_GetSavedAttributes(element) → {Object}

Gets the saved attributes for the provided element. This is usually the original list of attributes set on the element.
Parameters:
Name Type Description
element Object jQuery selection, should be a single entry
Inherited From:
Source:
Returns:
savedAttributes - attributes that were saved for this element.
Type
Object

<protected> #_InitOptions()

This method is called before _ComponentCreate, at which point the component has not yet been rendered. Component options should be initialized in this method, so that their final values are in place when _ComponentCreate is called.

This includes getting option values from the DOM, where applicable, and coercing option values (however derived) to their appropriate data type. No other work should be done in this method. See below for details.

Overrides of this method should call this._super first.

Usage:

  • If the component has an option like disabled that can be set from the DOM at create time, then the "get from DOM" logic should live in this method. E.g. a typical override might say "if the disabled option still has its initial value of undefined (i.e., the option has not been set), then get the DOM property and set it on the option." (See also next bullet.)
  • For attributes that live on the component's root node, keep in mind that anything specified via the rootAttributes option will not be placed on the DOM until _AfterCreate. So when getting attributes from the root node, components must first look in the rootAttributes option, and then, only if the attribute is not found there, look on the component root (if it already exists).
  • For options that, unlike disabled, have no corresponding DOM property, and are not otherwise set from the DOM, there is nothing to do in this method.
  • Do NOT set anything on the DOM in this method (like the resolved disabled value, or any rootAttributes values). The resolved option values should be set on the DOM later, in _ComponentCreate, and the rootAttributes values are set in baseComponent._AfterCreate.
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_RestoreAttributes()

Restores the saved element's attributes
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_SaveAttributes(element)

Saves the element's attributes within an internal variable to be reset during the destroy function The JSON variable will be held as : [ { "element" : element[i], "attributes" : { attributes[m]["name"] : {"attr": attributes[m]["value"], "prop": $(element[i]).prop(attributes[m]["name"]) } } ]
Parameters:
Name Type Description
element Object jQuery selection to save attributes for
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_SetRootAttributes()

Reads the rootAttributes option, and sets the root attributes on the component's root DOM element.

class and style are appended to the current class and style, respectively. All other attributes overwrite any existing value.

Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.