|
animationType
|
string
|
'fade'
|
Sets or gets the animationType property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
animationDelay
|
number
|
400
|
Sets or gets the animationDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { animationDelay:800, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { disabled:true, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
height
|
number
|
100
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { height:100, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
initContent
|
function
|
null
|
Sets or gets the initContent property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { initContent: "initContent", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
mode
|
string
|
'default'
|
Sets or gets the mode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { mode: "popup", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
popupCloseMode
|
string
|
'click'
|
Sets or gets the popupCloseMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { popupCloseMode: "mouseLeave", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
position
|
string
|
'top'
|
Sets or gets the position property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { position: "left", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { rtl:true, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
selectedIndex
|
number
|
0
|
Sets or gets the selectedIndex property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { selectedIndex:2, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
selectionMode
|
string
|
'click'
|
Sets or gets the selectionMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { selectionMode: "hover", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
scrollPosition
|
string
|
'both'
|
Sets or gets the scrollPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { scrollPosition: "near", theme:"light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
scrollStep
|
number
|
10
|
Sets or gets the scrollStep property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { scrollStep:20, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
scrollDelay
|
number
|
50
|
Sets or gets the scrollDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { scrollDelay:100, theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { theme: "light" } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxRibbon.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
reorder
|
Event
|
|
Code examples
Bind to the reorder event of jqxRibbon.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").addEventListener("reorder", function(event) { // Your code here. }); }; </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
select
|
Event
|
|
Code examples
Bind to the select event of jqxRibbon.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").addEventListener("select", function(event) { // Your code here. }); }; </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
unselect
|
Event
|
|
Code examples
Bind to the unselect event of jqxRibbon.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").addEventListener("unselect", function(event) { // Your code here. }); }; </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
|
|
addAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").addAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
clearSelection
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").clearSelection(); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
disableAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").disableAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").destroy(); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
enableAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").enableAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
hideAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").hideAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
removeAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").removeAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").render(); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").refresh(); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
selectAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").selectAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
showAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").showAt(0); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
setPopupLayout
|
Method
|
|
| 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
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").setPopupLayout(20, 'left',200,400); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
updateAt
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { document.querySelector( "jqx-ribbon").updateAt(1,Item1); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
string |
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Ribbon Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script> JQXElements.settings[ "ribbonSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-ribbon").val(); } </script></head><body> <jqx-ribbon settings="ribbonSettings"> <ul> <li style="margin-left:30px;">Browse Books </li> <li>Shipping </li> <li>About Us </li> </ul> <div> <div> <table> <tr> <td> <b>Fiction </b> </td> <td> <b>Biography </b> </td> <td> <b>Science </b> </td> </tr> <tr> <td> <a href="#">Adventure </a> </td> <td> <a href="#">Biography: General </a> </td> <td> <a href="#">Astronomy </a> </td> </tr> <tr> <td> <a href="#">Classics </a> </td> <td> <a href="#">Diaries, Letters & Journals </a> </td> <td> <a href="#">Biology </a> </td> </tr> <tr> <td> <a href="#">Historical Fiction </a> </td> <td> <a href="#">Memoirs </a> </td> <td> <a href="#">Geography </a> </td> </tr> <tr> <td> <a href="#">Romance </a> </td> <td> <b>Food & Drink </b> </td> <td> <a href="#">Mathematics </a> </td> </tr> <tr> <td> <a href="#">Science Fiction </a> </td> <td> <a href="#">General Cookery </a> </td> <td> <a href="#">Physics </a> </td> </tr> <tr> <td> <a href="#">Thrillers </a> </td> <td> <a href="#">National Cuisine </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Quick & Easy Cooking </a> </td> <td></td> </tr> <tr> <td></td> <td> <a href="#">Vegetarian Cookery </a> </td> <td> <a href="#">More books >> </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Countries we ship to </a> </td> </tr> <tr> <td> <a href="#">Delivery options </a> </td> </tr> <tr> <td> <a href="#">Order cancellation and returns </a> </td> </tr> </table> </div> <div> <table> <tr> <td> <a href="#">Contact us </a> </td> <td rowspan="3" style="width: 125px;"></td> <td rowspan="3"> <img src="../../images/bookshop.png" /> </td> </tr> <tr> <td> <a href="#">Jobs </a> </td> </tr> <tr> <td> <a href="#">Affiliates </a>
|
