Documentation
Getting Started
jqxRibbon represents a jQuery widget which can be used as a tabbed toolbar or mega menu.Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxRibbon widget requires the following files:
<head> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<div id="jqxRibbon"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div> <div> Content 1</div> <div> Content 2</div> <div> Content 3</div> </div></div>
The last step is to initialize the widget by adding the following script to the html document:
To call a function(method), you need to pass the method name and parameters(if any) in the jqxRibbon’s constructor.
To get the result of a function(method) call, you need to pass the method name in the jqxRibbon’s constructor and parameters(if any).$("#jqxRibbon").jqxRibbon("selectAt", 1);
To set a property(option), you need to pass the property name and value(s) in the jqxRibbon's constructor.var selectedIndex = $("#jqxRibbon").jqxRibbon("val");
To get a property(option), you need to pass the property name to the jqxRibbon's constructor.$("#jqxRibbon").jqxRibbon({ position: "left" });
To bind to an event of a UI widget, you can use basic jQuery syntax. The example code below demonstrates how to bind to the "change" event of jqxRibbon.var height = $("#jqxRibbon").jqxRibbon("height");
// bind to change event.$("#jqxRibbon").on("change", function (event) {alert("Selection changed");});
Basic Sample
<!DOCTYPE html><html><head> <title>jQuery Ribbon Sample</title> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxRibbon").jqxRibbon({ width: 320, height: 200, position: "top", selectionMode: "click" }); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id="jqxRibbon"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div> <div> Content 1</div> <div> Content 2</div> <div> Content 3</div> </div> </div></body></html>
The result of the above code is:
Example with Additional Settings
<!DOCTYPE html><html><head> <title>jQuery Ribbon Sample with Additional Settings</title> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <style type="text/css"> table { border-collapse: separate; border-spacing: 15px 5px; display: block; float: left; text-align: center; } .featured { margin-left: 30px; width: 200px; } .image { height: 130px; } </style> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxRibbon").jqxRibbon({ width: 320, height: 30, mode: "popup", position: "top", selectionMode: "click", animationType: "slide" }); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id="jqxRibbon"> <ul> <li>Greece</li> <li>Italy</li> <li>France</li> </ul> <div> <div> <table> <tr> <td> <a href="#">History</a> </td> </tr> <tr> <td> <a href="#">Culture</a> </td> </tr> <tr> <td> <a href="#">Tourism</a> </td> </tr> </table> <table class="featured"> <tr class="image"> <td> <img src="../../images/Parthenon.jpg" alt="Parthenon" style="width: 130px; height: 98px;"> </td> </tr> <tr> <td> <i>Featured: <a href="#">Parthenon</a></i> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">History</a> </td> </tr> <tr> <td> <a href="#">Culture</a> </td> </tr> <tr> <td> <a href="#">Tourism</a> </td> </tr> </table> <table class="featured"> <tr class="image"> <td> <img src="../../images/Colosseum.jpg" alt="Colosseum" style="width: 130px; height: 76px;"> </td> </tr> <tr> <td> <i>Featured: <a href="#">Colosseum</a></i> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">History</a> </td> </tr> <tr> <td> <a href="#">Culture</a> </td> </tr> <tr> <td> <a href="#">Tourism</a> </td> </tr> </table> <table class="featured"> <tr class="image"> <td> <img src="../../images/Tour_Eiffel.jpg" alt="Tour Eiffel" style="width: 80px; height: 120px;"> </td> </tr> <tr> <td> <i>Featured: <a href="#">Tour Eiffel</a></i> </td> </tr> </table> </div> </div> </div></body></html>
