jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
475 lines (458 loc) • 17.6 kB
HTML
<html lang="en">
<head>
<title id='Description'>Ribbon Custom element VerticalRightPosition</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" />
<meta name="description" content="This is an example of vertical right position in Custom element Ribbon." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.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/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<style type="text/css">
html, body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: #DC1F26;
}
table {
border-collapse: separate;
border-spacing: 0px 3px;
width: 142px;
}
.promo, .price {
height: 25px;
background-color: #DC1F26;
color: White;
text-align: center;
font-size: 17px;
}
.promo {
font-weight: bold;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.price {
font-family: "Trebuchet MS", Helvetica, sans-serif;
border: 1px solid pink;
padding: 5px 5px;
border-radius: 22px;
}
.name {
height: 35px;
text-align: center;
font-style: italic;
}
.image {
height: 220px;
text-align: center;
}
.container {
width: 140px;
float: left;
margin-left: 5px;
}
hr {
width: 75%;
float: left;
}
</style>
<script>
JQXElements.settings['RibbonSettings'] =
{
position: 'right', selectionMode: 'hover', animationType: 'fade'
};
window.onload = function() {
var myRibbon = document.querySelector('jqx-ribbon');
var myCheckBox = document.querySelector('jqx-check-box');
myCheckBox.addEventListener('change', event => {
var checked = event.args.checked;
var mode = checked ? 'popup' : 'default';
var width = checked ? 115 : 425;
jqxRibbon.setOptions({ width: width, mode: mode });
if (mode == 'popup') {
jqxRibbon.setPopupLayout(0, 'default', 310, '100%');
jqxRibbon.setPopupLayout(1, 'default', 310, '100%');
jqxRibbon.setPopupLayout(2, 'default', 310, '100%');
jqxRibbon.setPopupLayout(3, 'default', 310, '100%');
}
});
};
</script>
</head>
<body>
<div class="example-description">
This is an example of vertical right position in Custom element Ribbon.
</div>
<jqx-ribbon settings="RibbonSettings">
<ul id="header" style="width:115px;">
<li>TV and Players</li>
<li>Cell phones</li>
<li>Cameras</li>
<li>Computers</li>
</ul>
<div>
<div>
<div class="container">
<table>
<tr>
<td class="list">
<b><a href="#">TV</a></b>
</td>
</tr>
<tr></tr>
<tr>
<td class="list">
<a href="#">LED</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">LCD</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">Plasma</a>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
<tr>
<td class="list">
<b><a href="#">PLAYERS</a></b>
</td>
</tr>
<tr></tr>
<tr>
<td class="list">
<a href="#">DVD</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">Blu-Ray</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">CD</a>
</td>
</tr>
</table>
</div>
<div class="container">
<table>
<tr>
<td class="promo">
PROMO
</td>
</tr>
<tr>
<td class="image">
<img src="../../images/tv.png" />
</td>
</tr>
<tr>
<td class="name">
<a href="#">LG 22MN43D-PZ</a>
</td>
</tr>
<tr>
<td class="price">
Price: $1583
</td>
</tr>
</table>
</div>
</div>
<div>
<div class="container">
<table>
<tr>
<td class="list">
<b><a href="#">PHONES</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Brand</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Display size</a>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
<tr>
<td class="list">
<b><a href="#">SMARTPHONES</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Brand</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By OS</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Display size</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By CPU</a>
</td>
</tr>
</table>
</div>
<div class="container">
<table>
<tr>
<td class="promo">
PROMO
</td>
</tr>
<tr>
<td class="image">
<img src="../../images/Samsung-Galaxy-S4.png" />
</td>
</tr>
<tr>
<td class="name">
<a href="#">Samsung I9505 Galaxy S4</a>
</td>
</tr>
<tr>
<td class="price">
Price: $569
</td>
</tr>
</table>
</div>
</div>
<div>
<div class="container">
<table>
<tr>
<td class="list">
<b>
<a href="#">
DIGITAL<br />
CAMERAS
</a>
</b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">Hybrid</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">Compact</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">Digital SLR</a>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
<tr>
<td class="list">
<b><a href="#">CAMCORDERS</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">FLASH</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">HDD</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">HD Flash</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">HD HDD</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">HD Extreme</a>
</td>
</tr>
</table>
</div>
<div class="container">
<table>
<tr>
<td class="promo">
PROMO
</td>
</tr>
<tr>
<td class="image">
<img src="../../images/camera.png" />
</td>
</tr>
<tr>
<td class="name">
<a href="#">Nikon COOLPIX L330</a>
</td>
</tr>
<tr>
<td class="price">
Price: $358
</td>
</tr>
</table>
</div>
</div>
<div>
<div class="container">
<table>
<tr>
<td class="list">
<b><a href="#">LAPTOPS</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Processor Type</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By RAM Capacity</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By HDD Capacity</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Display Size</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Brand</a>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
<tr>
<td class="list">
<b><a href="#">DESKTOPS</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Processor Type</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By RAM Capacity</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By HDD Capacity</a>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Brand</a>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
<tr>
<td class="list">
<b><a href="#">ALL-IN-ONE</a></b>
</td>
</tr>
<tr>
<td class="list">
<a href="#">By Brand</a>
</td>
</tr>
</table>
</div>
<div class="container">
<table>
<tr>
<td class="promo">
PROMO
</td>
</tr>
<tr>
<td class="image">
<img src="../../images/l-25.jpg" style="width: 140px; height: 105px;" />
</td>
</tr>
<tr>
<td class="name">
<a href="#">Toshiba Qosmio X70-A-114</a>
</td>
</tr>
<tr>
<td class="price">
Price: $2199
</td>
</tr>
</table>
</div>
</div>
</div>
</jqx-ribbon>
<div style="clear:both;"></div>
<jqx-check-box style="margin-top: 50px;" id="megaMenuMode">Menu Mode</jqx-check-box>
</body>
</html>