Options
All
  • Public
  • Public/Protected
  • All
Menu

PrimeFaces Menubar Widget

Menubar is a horizontal navigation component.

Type Parameters

  • TCfg extends MenubarCfg = MenubarCfg

    Defaults to MenubarCfg. Type of the configuration object for this widget.

Hierarchy

Index

Constructors

  • Creates a new instance of this widget. Please note that you should NOT override this constructor. Instead, override the init method, which is called at the end of the constructor once the instance is created.

    Type Parameters

    Parameters

    • cfg: PartialWidgetCfg<TCfg>

      The widget configuration to be used for this widget instance. This widget configuration is usually created on the server by the javax.faces.render.Renderer for this component.

    Returns Menubar<TCfg>

Properties

active?: boolean

Whether the menu is currently active.

activeitem?: null | JQuery<HTMLElement>

The currently active (highlighted) menu item.

cfg: PartialWidgetCfg<TCfg>

The configuration of this widget instance. Please note that no property is guaranteed to be present, you should always check for undefined before accessing a property. This is partly because the value of a property is not transmitted from the server to the client when it equals the default.

Array of registered listeners invoked when this widget is destroyed. You should normally not use modify this directly, use addDestroyListener instead.

hideOverlayHandler?: UnbindCallback

Unbind callback for the hide overlay handler.

id: string | string[]

The client-side ID of this widget, with all parent naming containers, such as myForm:myWidget. This is also the ID of the container HTML element for this widget. In case the widget needs multiple container elements (such as Paginator), this may also be an array if IDs.

isHorizontal: boolean

Whether component is horizontal orientation like MenuBar.

isRTL: boolean

Whether the writing direction is set to right-to-left.

isVertical: boolean

Whether component is vertical orientation like TieredMenu.

itemClick?: boolean

Set to true an item was clicked and se to false when the user clicks outside the menu.

itemMouseDown: boolean

true if a menu item was clicked and the mouse button is still pressed.

jq: JQuery<HTMLElement>

The jQuery instance of the container element of this widget. In case id is an array, it will contain multiple elements. Please note that some widgets have got not DOM elements at all, in this case this will be an empty jQuery instance.

jqId: string

A CSS selector for the container element (or elements, in case id is an array) of this widget, This is usually an ID selector (that is properly escaped). You can select the container element or elements like this: $(widget.jqId).

key: string

The key of the JSON object.

lastFocusedItem?: null | JQuery<HTMLElement>

The last root menu that had focus, if any.

links: JQuery<HTMLElement>

DOM element with all links for the menu entries of this tiered menu.

Array of registered listeners invoked when this widget is refreshed. You should normally not use modify this directly, use addRefreshListener instead.

resizeHandler?: UnbindCallback

Unbind callback for the resize handler.

rootLinks: JQuery<HTMLElement>

DOM element with all links for the root (top-level) menu entries of this tiered menu.

scrollHandler?: UnbindCallback

Unbind callback for the scroll handler.

tabIndex: undefined | string

The default tabIndex of this component. Default to 0.

timeoutId?: number

Timeout ID, used for the animation when the menu is shown.

transition?: null | CssTransitionHandler

Handler for CSS transitions used by this widget.

trigger: JQuery<HTMLElement>

DOM element which triggers this menu.

widgetVar: string

The name of the widget variables of this widget. The widget variable can be used to access a widget instance by calling PF('myWidgetVar').

Methods

  • activate(menuitem: JQuery<HTMLElement>, focus?: boolean, showSubMenu?: boolean): void
  • Activates a menu item so that it can be clicked and interacted with.

    Parameters

    • menuitem: JQuery<HTMLElement>

      The menu item to activate.

    • Optional focus: boolean

      Defaults to true. - If false, does not focus the menu item.

    • Optional showSubMenu: boolean

      Defaults to true. - If false, does not show the submenu.

    Returns void

  • Lets you register a listener that is called before the component is destroyed.

    When an AJAX call is made and this component is updated, the DOM element is replaced with the newly rendered content. When the element is removed from the DOM by the update, the DOM element is detached from the DOM and all destroy listeners are called. This makes it possible to add listeners from outside the widget code.

    If you call this method twice with the same listener, it will be registered twice and later also called twice.

    Note that for this to work, you must not override the destroy method; or if you do, call super.

    Also, after this widget was detached is done, all destroy listeners will be unregistered.

    since

    7.0

    Parameters

    Returns void

  • When an AJAX call is made and this component is updated, the DOM element is replaced with the newly rendered content. However, no new instance of the widget is created. Instead, after the DOM element was replaced, all refresh listeners are called. This makes it possible to add listeners from outside the widget code.

    If you call this method twice with the same listener, it will be registered twice and later also called twice.

    Note that for this to work, you must not override the refresh method; or if you do, call super.

    Also, after the refresh is done, all refresh listeners will be deregistered. If you added the listeners from within this widget, consider adding the refresh listeners not only in the init method, but also again in the refresh method after calling super.

    since

    7.0.0

    Parameters

    Returns void

  • align(): void
  • Aligns this menu as specified in its widget configuration (property pos).

    Returns void

  • bindClickModeEvents(): void
  • bindDocumentHandler(): void
  • bindEvents(): void
  • Sets up all event listeners required by this widget.

    Returns void

  • bindFocusEvents(): void
  • Sets up all event listeners required for focus interactions. This includes:

    • Making the first menu item focusable by setting its tabindex
    • Handling mouse enter and click events to manage focus state
    • Handling focus events to highlight active menu items

    Returns void

  • bindHoverModeEvents(): void
  • bindItemEvents(): void
  • Sets up all event listeners for the mouse events on the menu entries (click / hover).

    Returns void

  • bindKeyEvents(): void
  • Sets up all event listners required for keyboard interactions.

    Returns void

  • bindPanelEvents(): void
  • Each widget may have one or several behaviors attached to it. This method calls all attached behaviors for the given event name. In case no such behavior exists, this method does nothing and returns immediately.

    A behavior is a way for associating client-side scripts with UI components that opens all sorts of possibilities, including client-side validation, DOM and style manipulation, keyboard handling, and more. When the behavior is triggered, the configured JavaScript gets executed.

    Behaviors are often, but not necessarily, AJAX behavior. When triggered, it initiates a request the server and processes the response once it is received. This enables several features such as updating or replacing elements dynamically. You can add an AJAX behavior via <p:ajax event="name" actionListener="#{...}" onstart="..." />.

    since

    7.0

    Parameters

    • event: string

      The name of an event to call.

    • Optional ext: Partial<ConfigurationExtender>

      Additional configuration that is passed to the AJAX request for the server-side callback.

    Returns void

  • deactivate(menuitem: JQuery<HTMLElement>, animate?: boolean): void
  • Deactivates a menu item so that it cannot be clicked and interacted with anymore.

    Parameters

    • menuitem: JQuery<HTMLElement>

      Menu item (LI) to deactivate.

    • Optional animate: boolean

      true to animate the transition to the disabled state, false otherwise.

    Returns void

  • deactivateAndReset(e?: Event): void
  • Deactivates the current active menu item and resets the menu state after a delay.

    Parameters

    • Optional e: Event

      The event object (optional).

    Returns void

  • destroy(): void
  • Will be called after an AJAX request if the widget container will be detached.

    When an AJAX call is made and this component is updated, the DOM element is replaced with the newly rendered content. When the element is removed from the DOM by the update, the DOM element is detached from the DOM and this method gets called.

    Please note that instead of overriding this method, you should consider adding a destroy listener instead via addDestroyListener. This has the advantage of letting you add multiple listeners, and makes it possible to add additional listeners from code outside this widget.

    By default, this method just calls all destroy listeners.

    Returns void

  • Selects the menu item link by making it focused and setting tabindex to "0" for ARIA.

    Parameters

    • menulink: JQuery<HTMLElement>

      The menu item (<a>) to select.

    • Optional event: TriggeredEvent<any, any, any, any>

      The event that triggered the focus.

    Returns void

  • getAriaLabel(label: string): string
  • Creates an ARIA label for an element.

    Parameters

    • label: string

      The label key to look up

    Returns string

    The ARIA label text - either from the widget configuration if specified, or from the PrimeFaces global ARIA labels

  • getBehavior(name: string): null | Behavior
  • Each widget may have one or several behaviors attached to it. This method returns the callback function for the given event.

    Note: Do not call the method directly, the recommended way to invoke a behavior is via callBehavior.

    A behavior is a way for associating client-side scripts with UI components that opens all sorts of possibilities, including client-side validation, DOM and style manipulation, keyboard handling, and more. When the behavior is triggered, the configured JavaScript gets executed.

    Behaviors are often, but not necessarily, AJAX behavior. When triggered, it initiates a request the server and processes the response once it is received. This enables several features such as updating or replacing elements dynamically. You can add an AJAX behavior via <p:ajax event="name" actionListener="#{...}" onstart="..." />.

    Parameters

    • name: string

      The name of an event for which to retrieve the behavior.

    Returns null | Behavior

    The behavior with the given name, or null if no such behavior exists.

  • Each widget has got a container element, this method returns that container. This container element is usually also the element whose ID is the client-side ID of the JSF component.

    Returns JQuery<HTMLElement>

    The jQuery instance representing the main HTML container element of this widget.

  • getLabel(label: string): string
  • Gets a localized label text for this widget.

    Parameters

    • label: string

      The label key to look up

    Returns string

    The label text - either from the widget configuration if specified, or from the PrimeFaces global labels

  • getMenuElement(): JQuery<HTMLElement>
  • Gets the Menu jQuery element. Override in subclasses to define the menu panel.

    Returns JQuery<HTMLElement>

    The jQuery object for the menu.

  • getParentForm(): JQuery<HTMLElement>
  • Gets the closest parent form for this widget.

    since

    10.0.0

    Returns JQuery<HTMLElement>

    A JQuery instance that either contains the form when found, or an empty JQuery instance when the form could not be found.

  • getParentFormId(): undefined | string
  • Gets the closest parent form ID for this widget lazily so it can be used in AJAX requests.

    since

    10.0.0

    Returns undefined | string

    Either the form ID or undefined if no form can be found.

  • hasBehavior(event: string): boolean
  • Each widget may have one or several behaviors attached to it. This method checks whether this widget has got at least one behavior associated with given event name.

    A behavior is a way for associating client-side scripts with UI components that opens all sorts of possibilities, including client-side validation, DOM and style manipulation, keyboard handling, and more. When the behavior is triggered, the configured JavaScript gets executed.

    Behaviors are often, but not necessarily, AJAX behavior. When triggered, it initiates a request the server and processes the response once it is received. This enables several features such as updating or replacing elements dynamically. You can add an AJAX behavior via <p:ajax event="name" actionListener="#{...}" onstart="..." />.

    Parameters

    • event: string

      The name of an event to check.

    Returns boolean

    true if this widget has the given behavior, false otherwise.

  • hide(): void
  • Hides this menu so that it becomes invisible and cannot be interacted with any longer.

    Returns void

  • highlight(menuitem: JQuery<HTMLElement>): void
  • Highlights the given menu item by applying the proper CSS classes and focusing the associated link.

    Parameters

    • menuitem: JQuery<HTMLElement>

      The menu item to highlight.

    Returns void

  • A widget class should not declare an explicit constructor, the default constructor provided by this base widget should be used. Instead, override this initialize method which is called after the widget instance was constructed. You can use this method to perform any initialization that is required. For widgets that need to create custom HTML on the client-side this is also the place where you should call your render method.

    Please make sure to call the super method first before adding your own custom logic to the init method:

    PrimeFaces.widget.MyWidget = PrimeFaces.widget.BaseWidget.extend({
    init: function(cfg) {
    this._super(cfg);
    // custom initialization
    }
    });
    override

    Parameters

    • cfg: PartialWidgetCfg<TCfg>

      The widget configuration to be used for this widget instance. This widget configuration is usually created on the server by the javax.faces.render.Renderer for this component.

    Returns void

  • initOverlay(): void
  • Initializes the overlay. Finds the element to which to append this menu and appends it to that element.

    Returns void

  • isDetached(): boolean
  • Checks if this widget is detached, ie whether the HTML element of this widget is currently contained within the DOM (the HTML body element). A widget may become detached during an AJAX update, and it may remain detached in case the update removed this component from the component tree.

    Returns boolean

    true if this widget is currently detached, or false otherwise.

  • Used in ajax updates, reloads the widget configuration.

    When an AJAX call is made and this component is updated, the DOM element is replaced with the newly rendered content. However, no new instance of the widget is created. Instead, after the DOM element was replaced, this method is called with the new widget configuration from the server. This makes it possible to persist client-side state during an update, such as the currently selected tab.

    Please note that instead of overriding this method, you should consider adding a refresh listener instead via addRefreshListener. This has the advantage of letting you add multiple listeners, and makes it possible to add additional listeners from code outside this widget.

    By default, this method calls all refresh listeners, then reinitializes the widget by calling the init method.

    Parameters

    Returns unknown

    The value as returned by the init method, which is often undefined.

  • removeScriptElement(clientId: string | string[]): void
  • Removes the widget's script block from the DOM. Currently, the ID of this script block consists of the client-side ID of this widget with the prefix _s, but this is subject to change.

    Parameters

    • clientId: string | string[]

      The client-side ID of the widget.

    Returns void

  • reset(): void
  • Deactivates all items and resets the state of this widget to its original state such that only the top-level menu items are shown.

    Returns void

  • resetFocus(resetFirst: boolean): void
  • Resets all menu items to tabindex="0" except the first item if resetFirst

    Parameters

    • resetFirst: boolean

      whether to reset to the first cell to tabindex="0"

    Returns void

  • setupDialogSupport(): void
  • show(): void
  • Shows (displays) this menu so that it becomes visible and can be interacted with.

    Returns void

  • showSubmenu(menuitem: JQuery<HTMLElement>, submenu: JQuery<HTMLElement>, focus?: boolean): void
  • Shows the given submenu of a menu item.

    override

    Parameters

    • menuitem: JQuery<HTMLElement>

      A menu item (LI) with children.

    • submenu: JQuery<HTMLElement>

      A child of the menu item.

    • Optional focus: boolean

      Defaults to true. - If false, does not focus the submenu.

      (from super type TieredMenu) Defaults to true. - If false, does not focus the submenu.

    Returns void

  • unbindPanelEvents(): void
  • Unselect the menu item link by removing focus and tabindex=-1 for ARIA.

    Parameters

    • menulink: JQuery<HTMLElement>

      Menu item (A) to unselect.

    • Optional event: TriggeredEvent<any, any, any, any>

      The event that triggered the unfocus.

    Returns void

Generated using TypeDoc