jQuery Ribbon API

Name Type Default

animationType String 'fade'

Sets or gets the animation type.

Possible values:

"fade"

"slide"

"none"

Code examples

Set the animationType property.

$("#jqxRibbon").jqxRibbon({ animationType: 'slide' });

Get the animationType property.

var animationType = $('#jqxRibbon').jqxRibbon('animationType');

Try it: animationType is set to 'slide'

animationDelay Number/String 400

Sets or gets the duration of the ribbon animation.

Code examples

Set the animationDelay property.

$("#jqxRibbon").jqxRibbon({ animationDelay: 400 });

Get the animationDelay property.

var animationDelay = $('#jqxRibbon').jqxRibbon('animationDelay');

Try it: animationDelay is set to 800

disabled Boolean false

Enables/disables the ribbon.

Code examples

Set the disabled property.

$("#jqxRibbon").jqxRibbon({ disabled: false });

Get the disabled property.

var disabled = $('#jqxRibbon').jqxRibbon('disabled');

Try it: disabled is set to true

height Number/String 100

Sets or gets the ribbon's height.

Code examples

Set the height property.

$("#jqxRibbon").jqxRibbon({ height: 120 });

Get the height property.

var height = $('#jqxRibbon').jqxRibbon('height');

Try it: height is set to 100

initContent Function null

Initializes the content of jqxRibbon. Useful for initializing other widgets.

Code examples

Set the initContent function.

$("#jqxRibbon").jqxRibbon({ initContent: function (index) {
    if (index == 0) {
        $("#jqxButton").jqxButton();
    }
});

Get the initContent function.

var initContent = $('#jqxRibbon').jqxRibbon('initContent');

Try it: initContent is set to a custom function

mode String 'default'

Sets or gets the ribbon's display mode.

Possible values:

"default" - the ribbon's content is included in its height.

"popup" - the ribbon's content is not included in its height and is positioned absolutely. It overlaps elements underneath it.

Code examples

Set the mode property.

$("#jqxRibbon").jqxRibbon({ mode: 'popup' });

Get the mode property.

var mode = $('#jqxRibbon').jqxRibbon('mode');

Try it: mode is set to 'popup'

popupCloseMode String 'click'

Sets or gets the way to close selected content sections when the mode property is set to "popup".

Possible values:

"click"

"mouseLeave"

"none"

Code examples

Set the popupCloseMode property.

$("#jqxRibbon").jqxRibbon({ popupCloseMode: 'mouseLeave' });

Get the popupCloseMode property.

var popupCloseMode = $('#jqxRibbon').jqxRibbon('popupCloseMode');

Try it: popupCloseMode is set to 'mouseLeave'

position String 'top'

Sets or gets whether the ribbon's header is positioned at the top, bottom, left or right of the content.

Possible values:

"top"

"bottom"

"left"

"right"

Code examples

Set the position property.

$("#jqxRibbon").jqxRibbon({ position: "left" });

Get the position property.

var position = $('#jqxRibbon').jqxRibbon('position');

Try it: position is set to "left"

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code examples

Set the rtl property.

$("#jqxRibbon").jqxRibbon({ rtl: false});

Get the rtl property.

var rtl = $('#jqxRibbon').jqxRibbon('rtl');

Try it: rtl is set to true

selectedIndex Number 0

Sets or gets the selected index (tab).

Code examples

Set the selectedIndex property.

$("#jqxRibbon").jqxRibbon({ selectedIndex: 0 });

Get the selectedIndex property.

var selectedIndex = $('#jqxRibbon').jqxRibbon('selectedIndex');

Try it: selectedIndex is set to 2

selectionMode String 'click'

Sets or gets the selection mode.

Possible values:

"click"

"hover"

"none"

Code examples

Set the selectionMode property.

$("#jqxRibbon").jqxRibbon({ selectionMode: 'hover' });

Get the selectionMode property.

var selectionMode = $('#jqxRibbon').jqxRibbon('selectionMode');

Try it: selectionMode is set to 'hover'

scrollPosition String 'both'

Sets or gets the position of the scrollbar buttons.

Possible values:

"both"

"near"

"far"

Code examples

Set the scrollPosition property.

$("#jqxRibbon").jqxRibbon({ scrollPosition: 'near' });

Get the scrollPosition property.

var scrollPosition = $('#jqxRibbon').jqxRibbon('scrollPosition');

Try it: scrollPosition is set to 'near'

scrollStep Number 10

Sets or gets the scroll step.

Code examples

Set the scrollStep property.

$("#jqxRibbon").jqxRibbon({ scrollStep: 20 });

Get the scrollStep property.

var scrollStep = $('#jqxRibbon').jqxRibbon('scrollStep');

Try it: scrollStep is set to 20

scrollDelay Number 50

Sets or gets the scroll delay.

Code examples

Set the scrollDelay property.

$("#jqxRibbon").jqxRibbon({ scrollDelay: 100 });

Get the scrollDelay property.

var scrollDelay = $('#jqxRibbon').jqxRibbon('scrollDelay');

Try it: scrollDelay is set to 100

theme String ''

width Number/String null

Sets or gets the ribbon's width.

Code examples

Set the width property.

$("#jqxRibbon").jqxRibbon({ width: 500 });

Get the width property.

var width = $('#jqxRibbon').jqxRibbon('width');

Try it: width is set to 500

change Event

This event is triggered when the user selects or unselects an item.

Code examples

Bind to the change event by type: jqxRibbon.

$('#jqxRibbon').on('change', function () { // Some code here. });

Try it: Bind to the change event by type: jqxRibbon.

reorder Event

This event is triggered when the user reorders the jqxRibbon items with the mouse.

Code examples

Bind to the reorder event by type: jqxRibbon.

$('#jqxRibbon').on('reorder', function () { // Some code here. });

Try it: Bind to the reorder event by type: jqxRibbon.

select Event

This event is triggered when the user selects an item.

Code examples

Bind to the select event by type: jqxRibbon.

$('#jqxRibbon').on('select', function () { // Some code here. });

Try it: Bind to the select event by type: jqxRibbon.

unselect Event

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event by type: jqxRibbon.

$('#jqxRibbon').on('unselect', function () { // Some code here. });

Try it: Bind to the unselect event by type: jqxRibbon.

addAt Method

Adds a new item by index.

List of parameters:

index - Number;
data - Object with the following properties:
- title - String;
- content - String.

Parameter	Type	Description
index	Number
item	Object

Return Value
None

Code examples

Invoke the addAt method.

$('#jqxRibbon').jqxRibbon('addAt', 2, { title: "New item", content: "New content" });

Try it: adds a new item in the jqxRibbon

clearSelection Method

Unselects the selected item and collapses its content.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the clearSelection method.

$('#jqxRibbon').jqxRibbon('clearSelection');

Try it: unselects the selected item in the jqxRibbon

disableAt Method

Disables an item by index. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the disableAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('disableAt', 8);

Try it: disables an item in the jqxRibbon

destroy Method

Destroys the jqxRibbon widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxRibbon').jqxRibbon('destroy');

Try it: destroys the jqxRibbon.

enableAt Method

Enables a disabled item by index. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the enableAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('enableAt', 3);

Try it: enables an item in the jqxRibbon

hideAt Method

Hides an item by index. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the hideAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('hideAt', 2);

Try it: hides an item in the jqxRibbon

removeAt Method

Removes an item from the ribbon. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the removeAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('removeAt', 2);

Try it: removes an item in the jqxRibbon

render Method

Renders the jqxRibbon widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxRibbon').jqxRibbon('render');

Try it: renders the jqxRibbon

refresh Method

Refreshes the jqxRibbon widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxRibbon').jqxRibbon('refresh');

Try it: refreshes the jqxRibbon

selectAt Method

Selects the item with indicated index. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the selectAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('selectAt', 2);

Try it: selects an item in the jqxRibbon

showAt Method

Shows an item by index. Index is a number.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the showAt method.

// @param index - Number

$('#jqxRibbon').jqxRibbon('showAt', 5);

Try it: shows item in the jqxRibbon

setPopupLayout Method

Sets the layout of an item's content if mode is set to "popup".

List of parameters:

index - Number;
layout - String, possible values:
- "default" - the item's content is aligned with the widget's header;
- "near" - the item's content is left/top aligned with its title;
- "far" - the item's content is right/bottom aligned with its title;
- "center" - the item's content is centered under/next to its title.
width - Number/String;
height - Number/String.

Parameter	Type	Description
index	Number
layout	String	"default" - the item's content is aligned with the widget's header; "near" - the item's content is left/top aligned with its title; "far" - the item's content is right/bottom aligned with its title; "center" - the item's content is centered under/next to its title.
width	Number/String
height	Number/String

Return Value
None

Code examples

Invoke the setPopupLayout method.

$('#jqxRibbon').jqxRibbon('setPopupLayout', 0, "center", 150, 100);

Try it: sets the layout of items' content in the jqxRibbon

updateAt Method

Updates an item.

Note: after an item has been updated with updateAt, initContent will be called again for that item (if set).

List of parameters:

index - Number;
newData - Object with the following properties:
- newTitle - String;
- newContent - String.

Parameter	Type	Description
index	Number
item	Object

Return Value
None

Code examples

Invoke the updateAt method.

$('#jqxRibbon').jqxRibbon('updateAt', 1, { newTitle: "Updated title", newContent: "Updated content" });

Try it: updates an item in the jqxRibbon

val Method

Sets or gets the selected index. Index is a number.

Parameter	Type	Description
value	String

Return Value
String

Code examples

Invoke the val method.

//Get the selected index.
//@param index - Number

var index = $("#jqxRibbon").jqxRibbon('val');

//Get the index using jQuery's val()

var index = $("#jqxRibbon").val();

//Set the selected index.

$("#jqxRibbon").jqxRibbon('val', 3);

//Set index using jQuery's val().

$("#jqxRibbon").val(3);

Try it: sets or gets the selected index in the jqxRibbon.

Properties

Possible values:

Code examples

Code examples

Code examples

Code examples

Code examples

Possible values:

Code examples

Possible values:

Code examples

Possible values:

Code examples

Code examples

Code examples

Possible values:

Code examples

Possible values:

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples