jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
455 lines (452 loc) • 17.2 kB
HTML
<html lang="en">
<head>
<title id="Description">This demo shows a vertical jqxRibbon. Hover an item to display its content.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<style type="text/css">
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 type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.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>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxRibbon").jqxRibbon({ height: 335, width:425, position: "left", selectionMode: "hover", animationType: "fade" });
$("#megaMenuMode").jqxCheckBox();
$("#megaMenuMode").on('change', function (event) {
var checked = event.args.checked;
var mode = checked ? "popup" : "default";
var width = checked ? 115 : 425;
$("#jqxRibbon").jqxRibbon({width:width, mode: mode });
if (mode == "popup") {
$('#jqxRibbon').jqxRibbon('setPopupLayout', 0, "default", 310, '100%');
$('#jqxRibbon').jqxRibbon('setPopupLayout', 1, "default", 310, '100%');
$('#jqxRibbon').jqxRibbon('setPopupLayout', 2, "default", 310, '100%');
$('#jqxRibbon').jqxRibbon('setPopupLayout', 3, "default", 310, '100%');
}
});
});
</script>
</head>
<body>
<div id="jqxRibbon">
<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>
</div>
<div style="margin-top: 50px;" id="megaMenuMode">Menu Mode</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>