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');

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');

Enables/disables the ribbon.

Code examples

Set the disabled property.

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

Get the disabled property.

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

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"/>
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

• Set the widget's theme property to 'energyblue' when you initialize it.

  $('#jqxRibbon').jqxRibbon({ theme: 'energyblue' });

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');

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. }); 

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. }); 

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. }); 

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. }); 

Adds a new item by index.

List of parameters:

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

Code examples

Invoke the addAt method.

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

Unselects the selected item and collapses its content.

Code examples

Invoke the clearSelection method.

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

Disables an item by index. Index is a number.

Code examples

Invoke the disableAt method.

// @param index - Number

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

Destroys the jqxRibbon widget.

Code examples

Invoke the destroy method.

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

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

Code examples

Invoke the enableAt method.

// @param index - Number

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

Hides an item by index. Index is a number.

Code examples

Invoke the hideAt method.

// @param index - Number

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

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

Code examples

Invoke the removeAt method.

// @param index - Number

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

Renders the jqxRibbon widget.

Code examples

Invoke the render method.

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

Refreshes the jqxRibbon widget.

Code examples

Invoke the refresh method.

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

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

Code examples

Invoke the selectAt method.

// @param index - Number

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

Shows an item by index. Index is a number.

Code examples

Invoke the showAt method.

// @param index - Number

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

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.

Code examples

Invoke the setPopupLayout method.

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

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.

Code examples

Invoke the updateAt method.

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

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

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);