jqwidgets-framework

<!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>