jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
146 lines (135 loc) • 6.83 kB
HTML
<html lang="en">
<head>
<title id="Description">Display other widgets in jqxRibbon. Click on a Ribbon Tab to display its content.
</title>
<meta name="description" content="This demo shows how to integrate jqxRibbon with other widgets." />
<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" />
<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/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.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 () {
// "Main" grid
var initiMainGrid = function () {
var mainMessages = [{ from: "Anthony", subject: "Visit to the zoo", time: "09/10/2014 12:35" }, { from: "Peter", subject: "Job application", time: "08/23/2014 18:13" }, { from: "Sarah", subject: "The roses...", time: "08/05/2014 15:01"}];
var mainSource =
{
datatype: "json",
datafields: [
{ name: 'from', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'time', type: 'date' }
],
localdata: mainMessages
};
var mainDataAdapter = new $.jqx.dataAdapter(mainSource);
$("#mainGrid").jqxGrid(
{
width: '100%',
autoheight: true,
source: mainDataAdapter,
selectionmode: "checkbox",
columns: [
{ text: 'From', datafield: 'from', width: 100 },
{ text: 'Subject', datafield: 'subject', width: 200 },
{ text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
]
});
};
// "Social" grid
var initiSocialGrid = function () {
var socialMessages = [{ from: "PhotoPics.com", subject: "Join us today!", time: "09/08/2014 11:00" }, { from: "CookMaster", subject: "Welcome to the CookMaster forum.", time: "08/29/2014 22:33"}];
var socialSource =
{
datatype: "json",
datafields: [
{ name: 'from', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'time', type: 'date' }
],
localdata: socialMessages
};
var socialDataAdapter = new $.jqx.dataAdapter(socialSource);
$("#socialGrid").jqxGrid(
{
width: '100%',
autoheight: true,
source: socialDataAdapter,
selectionmode: "checkbox",
columns: [
{ text: 'From', datafield: 'from', width: 100 },
{ text: 'Subject', datafield: 'subject', width: 240 },
{ text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
]
});
};
$("#ribbon").jqxRibbon({ width: getWidth("ribbon"), position: "top", selectionMode: "click", animationType: "none",
initContent: function (index) {
switch (index) {
case 0:
initiMainGrid();
break;
case 1:
initiSocialGrid();
break;
case 2:
$("#refreshButton").jqxButton({ width: 25, height: 25 });
break;
}
}
});
});
</script>
</head>
<body>
<div style="box-sizing: border-box; width: 800px; border-top-left-radius: 5px; border-top-right-radius: 5px;
padding-left: 10px; background-color: #1C3672; color: White; font-size: large;">
<img src="../../../jqwidgets/styles/images/mail.png" style="margin-right: 10px; display: inline-block;
vertical-align: bottom;" /><div style="display: inline-block; font-weight: bold;">
Inbox</div>
</div>
<div id="ribbon">
<ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
<li style="margin-left: 30px;">Main</li>
<li>Social</li>
<li>Promotions</li>
</ul>
<div>
<div>
<div id="mainGrid" style="margin-top: 5px; border-bottom: none; border-left: none;
border-right: none;">
</div>
</div>
<div>
<div id="socialGrid" style="margin-top: 5px; border-bottom: none; border-left: none;
border-right: none;">
</div>
</div>
<div>
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
No new mail under <em>Promotions</em>.<br />
<button id="refreshButton" title="Refresh">
<img src="../../../images/refresh.png" /></button>
</td>
</tr>
</table>
</div>
</div>
</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>