Name | Type | Default |
animationType
|
enum:RibbonAnimationType
|
'fade'
|
enum RibbonAnimationType { fade, slide, none } Sets or gets the animationType property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
animationDelay
|
String | Number
|
400
|
Sets or gets the animationDelay property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [animationDelay]="800">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [disabled]="true">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
height
|
String | Number
|
100
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [height]="100">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
initContent
|
(index: Any) => Void
|
null
|
Sets or gets the initContent property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [initContent]="initContent">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
mode
|
enum:RibbonMode
|
'default'
|
enum RibbonMode { default, popup } Sets or gets the mode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [mode]="'popup'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
popupCloseMode
|
enum:RibbonPopupCloseMode
|
'click'
|
enum RibbonPopupCloseMode { click, mouseLeave, none } Sets or gets the popupCloseMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [popupCloseMode]="'mouseLeave'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
position
|
enum:RibbonPosition
|
'top'
|
enum RibbonPosition { top, bottom, left, right } Sets or gets the position property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [position]="'left'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [rtl]="true">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
selectedIndex
|
Number
|
0
|
Sets or gets the selectedIndex property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [selectedIndex]="2">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
selectionMode
|
enum:RibbonSelectionMode
|
'click'
|
enum RibbonSelectionMode { click, hover, none } Sets or gets the selectionMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [selectionMode]="'hover'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
scrollPosition
|
enum:RibbonScrollPosition
|
'both'
|
enum RibbonScrollPosition { both, near, far } Sets or gets the scrollPosition property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [scrollPosition]="'near'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
scrollStep
|
Number
|
10
|
Sets or gets the scrollStep property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [scrollStep]="20">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
scrollDelay
|
Number
|
50
|
Sets or gets the scrollDelay property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [scrollDelay]="100">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'" [theme]="'energyblue'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
width
|
String | Number
|
null
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
}
|
|
change
|
Event
|
|
This event is triggered when the user selects or unselects an item.
Code examples
Bind to the change event of jqxRibbon.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon(onChange)="Change($event)"
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
Change(event: any): void
{
// Do Something
}
}
|
reorder
|
Event
|
|
This event is triggered when the user reorders the jqxRibbon items with the mouse.
Code examples
Bind to the reorder event of jqxRibbon.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon(onReorder)="Reorder($event)"
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
Reorder(event: any): void
{
// Do Something
}
}
|
select
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the select event of jqxRibbon.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon(onSelect)="Select($event)"
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
Select(event: any): void
{
// Do Something
}
}
|
unselect
|
Event
|
|
This event is triggered when the user unselects an item.
Code examples
Bind to the unselect event of jqxRibbon.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon(onUnselect)="Unselect($event)"
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent {
Unselect(event: any): void
{
// Do Something
}
}
|
|
Name | Return Type | Arguments |
addAt
|
Void
|
index: Number, item: RibbonItem
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.addAt(0);
}
}
|
clearSelection
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.clearSelection();
}
}
|
disableAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.disableAt(0);
}
}
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.destroy();
}
}
|
enableAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.enableAt(0);
}
}
|
hideAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.hideAt(0);
}
}
|
removeAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.removeAt(0);
}
}
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.render();
}
}
|
refresh
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.refresh();
}
}
|
selectAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.selectAt(0);
}
}
|
showAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.showAt(0);
}
}
|
setPopupLayout
|
Void
|
index: Number, layout: Any, width: String | Number, height: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.setPopupLayout(20,'left',200,400);
}
}
|
updateAt
|
Void
|
index: Number, item: RibbonItem
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
this.myRibbon.updateAt(1,Item1);
}
}
|
val
|
String
|
value: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxRibbon #myRibbon
[width]="800" [animationType]="'slide'">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Node.js</li>
<li style="margin-left: 30px;">JavaServer Pages</li>
<li style="margin-left: 30px;">Active Server Pages</li>
</ul>
<div>
<div>
Node.js is an event-driven I/O server-side JavaScript environment based on V8.....
</div>
<div>
JavaServer Pages (JSP) is a Java technology that helps software developers serve...
</div>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft...
</div>
</div>
</jqxRibbon>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myRibbon') myRibbon: jqxRibbonComponent;
ngAfterViewInit(): void
{
let value = this.myRibbon.val();
}
}
|