jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,508 lines • 75.7 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, jqxRibbon Help Documentation" />
<title>jqxRibbon API Documentation</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>animationType</span>
</td>
<td>
<span>String</span>
</td>
<td>'fade'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the animation type.
</p>
<h4>Possible values:</h4>
<p>
"fade"
</p>
<p>
"slide"
</p>
<p>
"none"
</p>
<h4>Code examples</h4>
<p>
Set the <code>animationType</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ animationType: 'slide' });</code></pre>
<p>
Get the <code>animationType</code> property.
</p>
<pre><code>var animationType = $('#jqxRibbon').jqxRibbon('animationType');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/o520jym7/">animationType
is set to 'slide'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>animationDelay</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the duration of the ribbon animation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>animationDelay</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ animationDelay: 400 });</code></pre>
<p>
Get the <code>animationDelay</code> property.
</p>
<pre><code>var animationDelay = $('#jqxRibbon').jqxRibbon('animationDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4Lyqqwfr/">animationDelay
is set to 800
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the ribbon.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ disabled: false });</code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxRibbon').jqxRibbon('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pvdt8uha/">disabled
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>100
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the ribbon's height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ height: 120 });</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxRibbon').jqxRibbon('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5ap5cc4u/">height
is set to 100
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>initContent</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Initializes the content of jqxRibbon. Useful for initializing other widgets.
</p>
<h4>Code examples</h4>
<p>
Set the <code>initContent</code> function.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ initContent: function (index) {
if (index == 0) {
$("#jqxButton").jqxButton();
}
});</code></pre>
<p>
Get the <code>initContent</code> function.
</p>
<pre><code>var initContent = $('#jqxRibbon').jqxRibbon('initContent');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/23tgzcmx/">initContent
is set to a custom function
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>mode</span>
</td>
<td>
<span>String</span>
</td>
<td>'default'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the ribbon's display mode.
</p>
<h4>Possible values:</h4>
<p>
"default" - the ribbon's content is included in its height.
</p>
<p>
"popup" - the ribbon's content is <em>not</em> included in its height and is positioned
absolutely. It overlaps elements underneath it.
</p>
<h4>Code examples</h4>
<p>
Set the <code>mode</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ mode: 'popup' });</code></pre>
<p>
Get the <code>mode</code> property.
</p>
<pre><code>var mode = $('#jqxRibbon').jqxRibbon('mode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qfm5ksLg/">mode
is set to 'popup'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>popupCloseMode</span>
</td>
<td>
<span>String</span>
</td>
<td>'click'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the way to close selected content sections when the <code>mode</code>
property is set to "popup".
</p>
<h4>Possible values:</h4>
<p>
"click"
</p>
<p>
"mouseLeave"
</p>
<p>
"none"
</p>
<h4>Code examples</h4>
<p>
Set the <code>popupCloseMode</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ popupCloseMode: 'mouseLeave' });</code></pre>
<p>
Get the <code>popupCloseMode</code> property.
</p>
<pre><code>var popupCloseMode = $('#jqxRibbon').jqxRibbon('popupCloseMode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/djbnac1q/">popupCloseMode
is set to 'mouseLeave'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>position</span>
</td>
<td>
<span>String</span>
</td>
<td>'top'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the ribbon's header is positioned at the top, bottom, left
or right of the content.
</p>
<h4>Possible values:</h4>
<p>
"top"
</p>
<p>
"bottom"
</p>
<p>
"left"
</p>
<p>
"right"
</p>
<h4>Code examples</h4>
<p>
Set the <code>position</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ position: "left" });</code></pre>
<p>
Get the <code>position</code> property.
</p>
<pre><code>var position = $('#jqxRibbon').jqxRibbon('position');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t8c4mgkp/">position
is set to "left"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets a value indicating whether widget's elements are aligned to support
locales using right-to-left fonts.
</p>
<h4>Code examples</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ rtl: false});</code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxRibbon').jqxRibbon('rtl');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2ndpo7t9/">rtl
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>selectedIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>0
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected index (tab).
</p>
<h4>Code examples</h4>
<p>
Set the <code>selectedIndex</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ selectedIndex: 0 });</code></pre>
<p>
Get the <code>selectedIndex</code> property.
</p>
<pre><code>var selectedIndex = $('#jqxRibbon').jqxRibbon('selectedIndex');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nf3fat52/">selectedIndex
is set to 2
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>selectionMode</span>
</td>
<td>
<span>String</span>
</td>
<td>'click'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selection mode.
</p>
<h4>Possible values:</h4>
<p>
"click"
</p>
<p>
"hover"
</p>
<p>
"none"
</p>
<h4>Code examples</h4>
<p>
Set the <code>selectionMode</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ selectionMode: 'hover' });</code></pre>
<p>
Get the <code>selectionMode</code> property.
</p>
<pre><code>var selectionMode = $('#jqxRibbon').jqxRibbon('selectionMode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tj23wh3h/">selectionMode
is set to 'hover'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>scrollPosition</span>
</td>
<td>
<span>String</span>
</td>
<td>'both'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the position of the scrollbar buttons.
</p>
<h4>Possible values:</h4>
<p>
"both"
</p>
<p>
"near"
</p>
<p>
"far"
</p>
<h4>Code examples</h4>
<p>
Set the <code>scrollPosition</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ scrollPosition: 'near' });</code></pre>
<p>
Get the <code>scrollPosition</code> property.
</p>
<pre><code>var scrollPosition = $('#jqxRibbon').jqxRibbon('scrollPosition');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ksodo0r9/">scrollPosition
is set to 'near'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>scrollStep</span>
</td>
<td>
<span>Number</span>
</td>
<td>10
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the scroll step.
</p>
<h4>Code examples</h4>
<p>
Set the <code>scrollStep</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ scrollStep: 20 });</code></pre>
<p>
Get the <code>scrollStep</code> property.
</p>
<pre><code>var scrollStep = $('#jqxRibbon').jqxRibbon('scrollStep');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bxs8oxwu/">scrollStep
is set to 20
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>scrollDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>50
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the scroll delay.
</p>
<h4>Code examples</h4>
<p>
Set the <code>scrollDelay</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ scrollDelay: 100 });</code></pre>
<p>
Get the <code>scrollDelay</code> property.
</p>
<pre><code>var scrollDelay = $('#jqxRibbon').jqxRibbon('scrollDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kheu2s0e/">scrollDelay
is set to 100
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css"type="text/css"/>
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /></code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
<pre><code>$('#jqxRibbon').jqxRibbon({ theme: 'energyblue' });</code></pre>
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5xu2ogya/">theme
is set to 'energyblue'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the ribbon's width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon({ width: 500 });</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxRibbon').jqxRibbon('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5xu2ogya/">width
is set to 500
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>change</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects or unselects an item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>change</code> event by type: jqxRibbon.
</p>
<pre><code>$('#jqxRibbon').on('change', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mzLoj4e5/">Bind
to the change event by type: jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>reorder</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user reorders the jqxRibbon items with the mouse.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>reorder</code> event by type: jqxRibbon.
</p>
<pre><code>$('#jqxRibbon').on('reorder', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zkb60bge/">Bind
to the reorder event by type: jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>select</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects an item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>select</code> event by type: jqxRibbon.
</p>
<pre><code>$('#jqxRibbon').on('select', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/67tgabyu/">Bind
to the select event by type: jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>unselect</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user unselects an item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>unselect</code> event by type: jqxRibbon.
</p>
<pre><code>$('#jqxRibbon').on('unselect', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9rjscrqo/">Bind
to the unselect event by type: jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>addAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds a new item by index.
</p>
List of parameters:
<ul>
<li>index - Number;</li>
<li>data - Object with the following properties:
<ul>
<li>title - String;</li>
<li>content - String.</li>
</ul>
</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>addAt</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('addAt', 2, { title: "New item", content: "New content" });</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/o5zzspg6/">adds
a new item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>clearSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unselects the selected item and collapses its content.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>clearSelection</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('clearSelection'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vzpqkqzq/">unselects
the selected item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>disableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables an item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>disableAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('disableAt', 8); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/knfeu2zh/">disables
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the jqxRibbon widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hk9p3286/">destroys
the jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>enableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables a disabled item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>enableAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('enableAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jfp8fzpr/">enables
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>hideAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Hides an item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>hideAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('hideAt', 2); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yjj1mhmp/">hides
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>removeAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes an item from the ribbon. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>removeAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('removeAt', 2); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/acghLnum/">removes
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>render</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Renders the jqxRibbon widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('render'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mmurm8ho/">renders
the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refreshes the jqxRibbon widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('refresh'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e3vf11g5/">refreshes
the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>selectAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects the item with indicated index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('selectAt', 2); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/b5axjtbq/">selects
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>showAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Shows an item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>showAt</code> method.
</p>
<p>
// @param index - Number
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('showAt', 5); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8m7f1qso/">shows
item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>setPopupLayout</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the layout of an item's content if mode is set to "popup".
</p>
List of parameters:
<ul>
<li>index - Number;</li>
<li>layout - String, possible values:
<ul>
<li>"default" - the item's content is aligned with the widget's header;</li>
<li>"near" - the item's content is left/top aligned with its title;</li>
<li>"far" - the item's content is right/bottom aligned with its title;</li>
<li>"center" - the item's content is centered under/next to its title.</li>
</ul>
</li>
<li>width - Number/String;</li>
<li>height - Number/String.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>layout</em></td>
<td>String</td>
<td> <ul>
<li>"default" - the item's content is aligned with the widget's header;</li>
<li>"near" - the item's content is left/top aligned with its title;</li>
<li>"far" - the item's content is right/bottom aligned with its title;</li>
<li>"center" - the item's content is centered under/next to its title.</li>
</ul></td>
</tr>
<tr>
<td><em>width</em></td>
<td>Number/String</td>
<td></td>
</tr>
<tr>
<td><em>height</em></td>
<td>Number/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>setPopupLayout</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('setPopupLayout', 0, "center", 150, 100); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xoqzq98d/">sets
the layout of items' content in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>updateAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Updates an item.
</p>
<p>
<em>Note:</em> after an item has been updated with updateAt, initContent will be
called again for that item (if set).
</p>
List of parameters:
<ul>
<li>index - Number;</li>
<li>newData - Object with the following properties:
<ul>
<li>newTitle - String;</li>
<li>newContent - String.</li>
</ul>
</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>updateAt</code> method.
</p>
<pre><code>$('#jqxRibbon').jqxRibbon('updateAt', 1, { newTitle: "Updated title", newContent: "Updated content" });</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mhyowh0c/">updates
an item in the jqxRibbon
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>val</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>val</code> method.
</p>
<p>
//Get the selected index.<br />
//@param index - Number
</p>
<pre><code>var index = $("#jqxRibbon").jqxRibbon('val'); </code></pre>
<p>
//Get the index using jQuery's val()
</p>
<pre><code>var index = $("#jqxRibbon").val(); </code></pre>
<p>
//Set the selected index.
</p>
<pre><code>$("#jqxRibbon").jqxRibbon('val', 3); </code></pre>
<p>
//Set index using jQuery's val().
</p>
<pre><code>$("#jqxRibbon").val(3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p9aruxuu/">sets
or gets the selected index in the jqxRibbon.
</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>