jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
361 lines (357 loc) • 17 kB
HTML
<html lang="en">
<head>
<title id="Description">This demo showcases an Office-like ribbon.</title>
<meta name="description" content="This demo showcases an Office-like ribbon." />
<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">
.button
{
margin: 2px;
margin-right: 0px;
}
.smallImages
{
width: 13px;
height: 13px;
}
.firstTableDescriptions
{
padding-right: 20px;
}
.inlineButton
{
display: inline-block;
}
.sectionSeparator
{
width: 1px;
height: 89px;
background-color: #eee;
float: left;
margin: 10px 5px 0 5px;
}
.bigTd
{
text-align: center;
vertical-align: top;
width: 50px;
}
.left
{
margin-left: 7px;
}
#fileItem.jqx-ribbon-item
{
background: #006400;
color: White ;
background-image: none;
text-shadow:none;
}
#fileItem.jqx-ribbon-item-hover
{
background: #338333 ;
color: White ;
text-shadow:none;
}
#fileItem.jqx-ribbon-item-selected
{
background: #005000 ;
color: White ;
text-shadow:none;
}
#clipBoardTable
{
height: 100%;
border-collapse: separate;
border-spacing: 0px 0px;
float: left;
}
#jqxgrid
{
border-top: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
#jqxRibbon, .jqx-ribbon-content-section {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.buttonTopAlign {
position: relative; top: 9px;
}
</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/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtooltip.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 code
$("#jqxRibbon").jqxRibbon({width: getWidth('ribbon'), height: 130, animationType: "none", selectionMode: "click", position: "top", mode: "default", selectedIndex: 1,
initContent: function (item) {
switch (item) {
case 0:
$("#save, #saveAs, #open, #close, #exit").jqxButton({ width: 13, height: 13 });
break;
case 1:
$("#paste").jqxButton();
$("#paste").jqxTooltip({ position: "mouse", content: "Paste (Ctrl + V)" });
$("#cut, #copy, #bold, #italic, #underline, #strikethrough, #leftAlign, #centerAlign, #rightAlign, #justifyAlign").jqxButton();
$("#cut").jqxTooltip({ position: "mouse", content: "Cut (Ctrl + X)" });
$("#copy").jqxTooltip({ position: "mouse", content: "Copy (Ctrl + C)" });
$("#bold").jqxTooltip({ position: "mouse", content: "Bold (Ctrl + B)" });
$("#italic").jqxTooltip({ position: "mouse", content: "Italic (Ctrl + I)" });
$("#underline").jqxTooltip({ position: "mouse", content: "Underline (Ctrl + U)" });
$("#strikethrough").jqxTooltip({ position: "mouse", content: "Strikethrough" });
$("#leftAlign").jqxTooltip({ position: "mouse", content: "Align Text Left (Ctrl + L)" });
$("#centerAlign").jqxTooltip({ position: "mouse", content: "Center (Ctrl + E)" });
$("#rightAlign").jqxTooltip({ position: "mouse", content: "Align Text Right (Ctrl + R)" });
$("#justifyAlign").jqxTooltip({ position: "mouse", content: "Justify (Ctrl + J)" });
$("#font").jqxDropDownList({ source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Arial;'>Arial</span>"], width: 150, autoDropDownHeight: true, selectedIndex: 1 });
$("#fontSize").jqxDropDownList({ source: [8, 10, 12, 14, 18, 24, 36], width: 50, autoDropDownHeight: true, selectedIndex: 1 });
break;
case 2:
$("#help, #about, #update").jqxButton({ width: 26, height: 26 });
break;
}
}
});
// jqxGrid code
// renderer for grid cells.
var numberrenderer = function (row, column, value) {
return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
}
// create Grid datafields and columns arrays.
var datafields = [];
var columns = [];
for (var i = 0; i < 26; i++) {
var text = String.fromCharCode(65 + i);
if (i == 0) {
var cssclass = 'jqx-widget-header';
if (theme != '') cssclass += ' jqx-widget-header-' + theme;
columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
}
datafields[datafields.length] = { name: text };
columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
}
var source =
{
unboundmode: true,
totalrecords: 100,
datafields: datafields,
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: getWidth("Tabs"),
source: dataAdapter,
editable: true,
columnsresize: true,
selectionmode: 'multiplecellsadvanced',
columns: columns
});
});
</script>
</head>
<body>
<div id="jqxRibbon">
<ul>
<li id="fileItem">File</li>
<li>Home</li>
<li>Help</li>
</ul>
<div>
<div style="overflow:hidden;">
<table style="border-collapse: separate; border-spacing: 0;">
<tr>
<td>
<div id="save" class="button">
<img class="smallImages" src="../../../images/save-26.png" /></div>
</td>
<td class="firstTableDescriptions">
Save
</td>
<td>
<div id="saveAs" class="button">
<img class="smallImages" src="../../../images/save_as-26.png" />
</div>
</td>
<td class="firstTableDescriptions">
Save As
</td>
<td>
<div id="open" class="button">
<img class="smallImages" src="../../../images/opened_folder-26.png" />
</div>
</td>
<td class="firstTableDescriptions">
Open
</td>
<td>
<div id="close" class="button">
<img class="smallImages" src="../../../images/folder-26.png" />
</div>
</td>
<td class="firstTableDescriptions">
Close
</td>
<td>
<div id="exit" class="button">
<img src="../../../images/close_window-26.png" class="smallImages" />
</div>
</td>
<td class="firstTableDescriptions">
Exit
</td>
</tr>
</table>
</div>
<div style="overflow:hidden;">
<table id="clipBoardTable">
<tr>
<td rowspan="3" style="text-align: center;">
<div id="paste" class="button">
<img src="../../../images/paste-26.png" />
<br />
Paste
</div>
</td>
<td>
<div style="position: relative; margin-top:9px;" id="cut" class="button inlineButton">
<img src="../../../images/cut-26.png" class="smallImages" />
Cut
</div>
</td>
</tr>
<tr>
<td>
<div style="top:-8px; position: relative;" id="copy" class="button inlineButton">
<img src="../../../images/copy-26.png" class="smallImages" />
Copy
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
Clipboard
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
<table style="float: left;">
<tr>
<td colspan="3">
<div style="position: relative; top: 9px;" id="font">
</div>
</td>
<td>
<div style="position: relative; top: 9px;" id="fontSize">
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div style="position: relative; top: 5px; left: -2px;" id="bold" class="button inlineButton">
<img src="../../../images/bold-26.png" class="smallImages" />
</div>
<div style="position: relative; top: 5px; left: -2px;" id="italic" class="button inlineButton">
<img src="../../../images/italic-26.png" class="smallImages" />
</div>
<div style="position: relative; top: 5px; left: -2px;" id="underline" class="button inlineButton">
<img src="../../../images/underline-26.png" class="smallImages" />
</div>
<div style="position: relative; top: 5px; left: -2px;" id="strikethrough" class="button inlineButton">
<img src="../../../images/strikethrough-26.png" style="width: 13px; height: 13px;" />
</div>
</td>
</tr>
<tr style="height: 15px;">
</tr>
<tr>
<td colspan="4" style="text-align: center;">
Font
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
<table style="float: left;">
<tr>
<td>
<div id="leftAlign" class="button inlineButton buttonTopAlign">
<img src="../../../images/align_left-26.png" class="smallImages" />
</div>
<div id="centerAlign" class="button inlineButton buttonTopAlign">
<img src="../../../images/align_center-26.png" class="smallImages" />
</div>
<div id="rightAlign" class="button inlineButton buttonTopAlign">
<img src="../../../images/align_right-26.png" class="smallImages" />
</div>
<div id="justifyAlign" class="button inlineButton buttonTopAlign">
<img src="../../../images/align_justify-26.png" class="smallImages" />
</div>
</td>
</tr>
<tr>
<td style="height: 65px; text-align: center; vertical-align: bottom;">
Alignment
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
</div>
<div style="overflow:hidden;">
<table style="height: 100%;">
<tr>
<td class="bigTd">
<div id="help" class="button left">
<img src="../../../images/help-26.png" />
</div>
Help
</td>
<td class="bigTd">
<div id="about" class="button left">
<img src="../../../images/about-26.png" />
</div>
About
</td>
<td class="bigTd">
<div id="update" class="button left">
<img src="../../../images/downloading_updates-26.png" />
</div>
Update
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="jqxgrid">
</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>