| Name | Type | Default |
|---|
|
animationShowDuration
|
Number
|
350
|
Sets or gets the animationShowDuration property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationShowDuration]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
animationHideDuration
|
Number
|
250
|
Sets or gets the animationHideDuration property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationHideDuration]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
animationHideDelay
|
Number
|
500
|
Sets or gets the animationHideDelay property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationHideDelay]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
animationShowDelay
|
Number
|
200
|
Sets or gets the animationShowDelay property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationShowDelay]="300"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoCloseInterval
|
Number
|
10000
|
Sets or gets the autoCloseInterval property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseInterval]="300"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoSizeMainItems
|
Boolean
|
true
|
Sets or gets the autoSizeMainItems property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoSizeMainItems]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoCloseOnClick
|
Boolean
|
true
|
Sets or gets the autoCloseOnClick property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseOnClick]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoOpenPopup
|
Boolean
|
true
|
Sets or gets the autoOpenPopup property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoOpenPopup]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoOpen
|
Boolean
|
true
|
Sets or gets the autoOpen property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoOpen]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
autoCloseOnMouseLeave
|
Boolean
|
true
|
Sets or gets the autoCloseOnMouseLeave property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseOnMouseLeave]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
clickToOpen
|
Boolean
|
false
|
Sets or gets the clickToOpen property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [clickToOpen]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [disabled]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [enableHover]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
easing
|
String
|
easeInOutSine
|
Sets or gets the easing property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [easing]="'linear'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
height
|
String | Number
|
null
|
Sets or gets the height property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
keyboardNavigation
|
Boolean
|
false
|
Sets or gets the keyboardNavigation property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [keyboardNavigation]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
minimizeWidth
|
String | Number
|
'auto'
|
Sets or gets the minimizeWidth property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [minimizeWidth]="450"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
mode
|
enum:MenuMode
|
horizontal
|
enum MenuMode { horizontal, vertical, popup } Sets or gets the mode property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [mode]="'vertical'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
popupZIndex
|
String | Number
|
20000
|
Sets or gets the popupZIndex property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [popupZIndex]="99999"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [rtl]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
showTopLevelArrows
|
Boolean
|
false
|
Sets or gets the showTopLevelArrows property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [showTopLevelArrows]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
source
|
Any
|
null
|
Sets or gets the source property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [source]="source"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [theme]="'energyblue'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
width
|
String | Number
|
null
|
Sets or gets the width property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
|
|
closed
|
Event
|
|
This event is triggered when any of the jqxMenu Sub Menus is closed.
Code examples
Bind to the closed event of jqxMenu.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onClosed)="Closed($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
itemclick
|
Event
|
|
This event is triggered when a menu item is clicked.
Code examples
Bind to the itemclick event of jqxMenu.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onItemclick)="Itemclick($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Itemclick(event: any): void
|
|
initialized
|
Event
|
|
This event is triggered after the menu is initialized.
Code examples
Bind to the initialized event of jqxMenu.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onInitialized)="Initialized($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Initialized(event: any): void
|
|
shown
|
Event
|
|
This event is triggered when any of the jqxMenu Sub Menus is displayed.
Code examples
Bind to the shown event of jqxMenu.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onShown)="Shown($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent {
|
|
|
| Name | Return Type | Arguments |
|---|
|
closeItem
|
Void
|
itemID: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.closeItem(Item1);
|
|
close
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
disable
|
Void
|
itemID: String | Number,
value: Boolean
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.disable(0,true);
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
minimize
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
open
|
Void
|
left: Number,
top: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
openItem
|
Void
|
itemID: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.openItem(Item1);
|
|
restore
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent;
|
|
setItemOpenDirection
|
Void
|
item: String | Number,
horizontaldirection: String,
verticaldirection: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.setItemOpenDirection(Item1,left,top);
|
