jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
740 lines (692 loc) • 34.8 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: 0;
font-size:11px;
}
.sectionSeparator {
width: 1px;
height: 105px;
background-color: #eee;
float: left;
margin: 10px 5px 0 5px;
}
.bigTd {
text-align: center;
vertical-align: top;
width: 50px;
}
.left {
margin-left: 7px;
}
#clipBoardTable {
height: 100%;
border-collapse: separate;
border-spacing: 0 0;
float: left;
}
#grid {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#ribbon, #ribbon div, #ribbon li {
font-size:11px;
}
#ribbon li {
line-height:16px;
}
#ribbon, .jqx-ribbon-content-section-demoTheme {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.pasteText {
font-size: 10px;
}
div#pasteButton {
text-align: center;
}
#pasteDropDown .jqx-listitem-element-demoTheme {
border: none;
font-size: 10px;
}
#font {
font-size: 11px;
line-height: 17px;
}
#fontSize {
line-height: 13px;
}
.jqx-dropdownlist-state-normal {
background: transparent;
border:none;
}
.jqx-button {
background: transparent;
}
.separator {
padding: 0 0 0 1px;
height: 20px;
border: solid 1px #fff;
border-top: 0;
border-bottom: 0;
margin: 0 2px;
width: 1px;
display: inline-block;
position: relative;
background: #bfc3c7;
background: linear-gradient(#f8f9fa, #bfc3c7, #f8f9fa);
}
.firstrow, .secondrow, .thirdrow {
font-size: 0;
padding: 0;
}
.firstrow .jqx-widget,
.secondrow .jqx-widget,
.thirdrow .jqx-widget {
position: relative;
display: inline-block;
font-size: 10px;
}
.thirdrow .separator {
margin: 0 2px;
height: 14px;
}
.jqx-button-demoTheme span {
margin-left: 2px;
}
.jqx-button {
position: relative;
height: 16px;
padding: 2px;
border: 1px solid transparent;
line-height: 16px;
text-align: left;
}
#fileItem {
padding: 0px;
}
#fileItem {
background: #006400;
color: White ;
background-image: none;
text-shadow: none;
}
#fileItem{
background: #338333 ;
color: White ;
text-shadow: none;
}
#fileItem {
background: #005000 ;
color: White ;
text-shadow: none;
}
.jqx-ribbon-content-section-demoTheme {
background: #eaedf1;
background: linear-gradient(#fff 40%, #eaedf1);
}
.jqx-button-demoTheme:hover {
border-color: #f1ca58;
box-shadow: 0 0 1px 1px #fff inset;
background: #fde38a;
background: linear-gradient(#fdeeb3, #fde38a, #fdefbb);
}
.jqx-button-demoTheme:active {
border-color: #c2963d;
background: #fff37f;
background: linear-gradient(#ffe575, #fff37f);
}
.jqx-fill-state-hover-demoTheme,
.jqx-fill-state-pressed-demoTheme {
border-color: #c2963d;
background: #fff37f;
background: linear-gradient(#ffe575, #fff37f);
}
#fileItemButton {
background: transparent;
border: none;
color: #fff;
}
.icon {
background: url('../../../images/ribbon-icons.png') no-repeat top left;
width: 16px;
height: 16px;
display: inline-block;
margin-right: 1px;
vertical-align: middle;
}
.icon.closed_door { background-position: 0 0; }
.icon.change-case-16 { background-position: -26px 0; }
.icon.ClearFormattingImage { background-position: -52px 0; width: 17px; }
.icon.close { background-position: -78px 0; }
.icon.cut { background-position: -104px 0; }
.icon.cut_red { background-position: -130px 0; }
.icon.cut-icon-16 { background-position: -156px 0; }
.icon.CutImage { background-position: -182px 0; }
.icon.folder { background-position: -208px 0; }
.icon.FontDialogImage { background-position: -234px 0; }
.icon.fontsizedecrease16 { background-position: -260px 0; }
.icon.fontsizeincrease16 { background-position: -286px 0; }
.icon.FormatPainterImage { background-position: -312px 0; }
.icon.page_copy { background-position: -338px 0; }
.icon.page_paste { background-position: -364px 0; }
.icon.page_white_paste { background-position: -390px 0; }
.icon.paintcan { background-position: -416px 0; }
.icon.paste_plain { background-position: -442px 0; }
.icon.paste_word { background-position: -468px 0; }
.icon.paste-24 { background-position: -494px 0; width: 24px; height: 24px; }
.icon.paste-48 { background-position: -528px 0; width: 48px; height: 48px; }
.icon.PasteImage { background-position: -586px 0; }
.icon.PasteImageLarge { background-position: -612px 0; width: 32px; height: 32px; }
.icon.PasteSpecialImage { background-position: -654px 0; }
.icon.pencil { background-position: -680px 0; }
.icon.SaveImage { background-position: -706px 0; }
.icon.SaveSelectionImage { background-position: -732px 0; }
.icon.ShowParagraphMarksImage { background-position: -758px 0; }
.icon.SortHS { background-position: -784px 0; }
.icon.spellcheck { background-position: -810px 0; }
.icon.text_align_center { background-position: -836px 0; }
.icon.text_align_justify { background-position: -862px 0; }
.icon.text_align_left { background-position: -888px 0; }
.icon.text_align_right { background-position: -914px 0; }
.icon.text_bold { background-position: -940px 0; }
.icon.text_indent { background-position: -966px 0; }
.icon.text_indent_remove { background-position: -992px 0; }
.icon.text_italic { background-position: -1018px 0; }
.icon.text_linespacing { background-position: -1044px 0; }
.icon.text_list_bullets { background-position: -1070px 0; }
.icon.text_list_numbers { background-position: -1096px 0; }
.icon.text_strikethrough { background-position: -1122px 0; }
.icon.text_subscript { background-position: -1148px 0; }
.icon.text_superscript { background-position: -1174px 0; }
.icon.text_underline { background-position: -1200px 0; }
</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/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcolorpicker.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.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 () {
$('#fileItemButton').jqxDropDownButton({ arrowSize: 0, height: 26, dropDownWidth: 120, width: 50, theme: 'demoTheme' });
$('#fileItemButton').jqxDropDownButton('setContent', '<span style="position: relative; line-height: 26px; margin-left:10px;">File</span>');
$("#save, #saveAs, #open, #close, #exit").jqxButton({ theme: 'demoTheme' });
// jqxRibbon code
$("#ribbon").jqxRibbon({
width: getWidth('ribbon'),
height: 131,
animationType: "none",
selectionMode: "click",
position: "top",
theme: "demoTheme",
mode: "default",
selectedIndex: 1,
initContent: function (item) {
switch (item) {
case 0:
break;
case 1:
$("#subscript, #superscript, #bold, #italic, #underline, #strikethrough").jqxToggleButton({ theme: 'demoTheme' });
$("#shrinkFont, #copyButton, #cutButton, #growFont, #formatPainter, #clearFormatting, #alignLeft, #alignCenter, #alignRight, #alignJustify, #bulletList, #numberedList, #decreaseIndent, #increaseIndent, #Sort, #lineSpacing, #showHide").jqxButton({ theme: 'demoTheme' });
$("#cutButton").jqxTooltip({ position: "mouse", content: "Cut (Ctrl + X)" });
$("#copyButton").jqxTooltip({ position: "mouse", content: "Copy (Ctrl + C)" });
$("#subscript").jqxTooltip({ position: "mouse", content: "Subscript" });
$("#superscript").jqxTooltip({ position: "mouse", content: "Superscript" });
$("#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" });
$("#alignLeft").jqxTooltip({ position: "mouse", content: "Align Text Left (Ctrl + L)" });
$("#alignCenter").jqxTooltip({ position: "mouse", content: "Center (Ctrl + E)" });
$("#alignRight").jqxTooltip({ position: "mouse", content: "Align Text Right (Ctrl + R)" });
$("#alignJustify").jqxTooltip({ position: "mouse", content: "Justify (Ctrl + J)" });
$("#bulletList").jqxTooltip({ position: "mouse", content: "Bulleted List" });
$("#numberedList").jqxTooltip({ position: "mouse", content: "Numbered List" });
$("#decreaseIndent").jqxTooltip({ position: "mouse", content: "Decrease Indent" });
$("#increaseIndent").jqxTooltip({ position: "mouse", content: "Increase Indent" });
$("#Sort").jqxTooltip({ position: "mouse", content: "Sort Direction" });
$("#lineSpacing").jqxTooltip({ position: "mouse", content: "Line and Paragraph Spacing" });
$("#showHide").jqxTooltip({ position: "mouse", content: "Show/Hide special characters" });
$("#bucketColor").jqxTooltip({ position: "mouse", content: "Fill style", theme: 'demoTheme' });
$("#bucketColor").jqxDropDownButton({
width: 42,
height: 19,
theme: "demoTheme",
dropDownWidth: 180,
initContent: function () {
$("#bucketColorPicker").jqxColorPicker({
color: "000000",
colorMode: 'hue',
width: 180,
theme: 'demoTheme',
height: 180
}).on('colorchange', function (event) {
$("#bucketColorPreview").css('background', '#' + event.args.color.hex);
});
}
}).jqxDropDownButton('setContent', '<span style="position:relative; display:inline-block; top: 2px"><div class="icon paintcan"></div><span id="bucketColorPreview" style="display: block; position:absolute; height: 3px; width: 16px; background:#000"></span></span>');
$("#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: 120,
height: 21,
theme: 'demoTheme',
autoDropDownHeight: true,
selectedIndex: 1
});
$("#fontSize").jqxDropDownList({
source: [8, 9, 10, 11, 12, 14, 18, 20, 22, 24],
theme: 'demoTheme',
renderer: function (index, label, value) {
return '<span style="font-size:' + value + 'px;">' + value + '</span>';
},
width: 70, height: 21, autoDropDownHeight: true, selectedIndex: 2
});
$("#subscript").on('click', function () {
if ($('#superscript').jqxToggleButton('toggled')) {
$('#superscript').jqxToggleButton('toggled', false)
}
});
$("#superscript").on('click', function () {
if ($('#subscript').jqxToggleButton('toggled')) {
$('#subscript').jqxToggleButton('toggled', false)
}
});
$("#changeCase").jqxDropDownList({
source: ['Sentence Case', 'lowercase', 'UPPERCASE', 'Capitalize Each Word'],
theme: 'demoTheme',
selectionRenderer: function (object, index, label) {
return '<div class="icon change-case-16" style="top:3px; position:relative"></div>';
},
dropDownWidth: 150,
autoDropDownHeight: true, selectedIndex: 0, width: 40
});
$("#fontColor").jqxDropDownButton({
width: 100,
theme: 'demoTheme',
dropDownWidth: 180,
height: 21, initContent: function () {
$("#fontColorPicker").jqxColorPicker({
color: "000000",
colorMode: 'hue',
theme: 'demoTheme',
width: 180,
height: 180
}).on('colorchange', function (event) {
$("#fontColorPreview").css('background', '#' + event.args.color.hex);
});
}
}).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon FontDialogImage"></div><span id="fontColorPreview" style="display: block; position:absolute; height: 3px; width: 16px; background:#000"></span></span><span style="position:relative; display: inline; top:3px">Font Color</span>');
$("#highlightColor").jqxDropDownButton({
width: 130,
dropDownWidth: 180,
theme: 'demoTheme',
height: 21,
initContent: function () {
$("#highlightColorPicker").jqxColorPicker({
color: "FF0000",
theme: 'demoTheme',
colorMode: 'hue',
width: 180,
height: 180
}).on('colorchange', function (event) {
$("#highlightColorPreview").css('background', '#' + event.args.color.hex);
});
}
}).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon pencil"></div><span id="highlightColorPreview" style="display: block; position:absolute; height: 3px; width: 16px; background:#F00"></span></span><span style="position:relative; display: inline; top:3px">Highlight Color</span>');
var pasteData = [
{ label: 'Paste', imageClass: 'icon page_paste' },
{ label: 'Paste Special', imageClass: 'icon paste_plain' },
{ label: 'Paste text', imageClass: 'icon paste_word' },
{ label: 'Paste link', imageClass: 'icon PasteImage' }
];
$('#pasteButton').jqxButton({
width: 35,
theme: 'demoTheme',
height: 56
}).on('click', function (event) {
var text = $(this).find('.pasteText').html();
console.log(text + ' clicked');
}).on('mousedown', function (event) {
event.preventDefault();
});
$("#pasteDropDown").jqxDropDownList({
source: pasteData,
width: 22,
height: 10,
theme: 'demoTheme',
animationType: 'none',
dropDownWidth: '110px',
autoDropDownHeight: true,
renderer: function (index, label, value) {
var imgUrl = pasteData[index].imgUrl;
var labelEl = '<span style="font-size: 10px">' + label + '</span>';
var icon = '<span class="' + pasteData[index].imageClass + '" style=""></span>';
return '<span>' + icon + labelEl + '</span>';
},
selectionRenderer: function (object, index, label) {
return "";
},
selectedIndex: 0
}).on('select', function (event) {
var index = event.args.index;
var icon = '<span class="' + pasteData[index].imageClass + '" style="zoom: 1.5"></span>';
$('#pasteButton').html(icon + '<span class="pasteText">' + pasteData[index].label + '</span>');
$('#pasteButton').jqxButton('render');
});
break;
case 2:
$("#help, #about, #update").jqxButton({ width: 26, height: 26, theme: 'demoTheme' });
break;
}
}
});
$('#ribbon').jqxRibbon('disableAt', 0);
// 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
$("#grid").jqxGrid(
{
width: getWidth("Grid"),
source: dataAdapter,
editable: true,
columnsresize: true,
selectionmode: 'multiplecellsadvanced',
columns: columns
});
});
</script>
</head>
<body>
<div id="ribbon">
<ul>
<li id="fileItem">
<div id="fileItemButton">
<div style="height:103px;">
<ul style="list-style-type: none; margin:0px; padding: 3px;">
<li>
<div id="save" class="button">
<div class='icon SaveImage'></div> Save
</div>
</li>
<li>
<div id="saveAs" class="button">
<div class='icon SaveSelectionImage'></div> Save As
</div>
</li>
<li>
<div id="open" class="button">
<div class='icon folder'></div> Open
</div>
</li>
<li>
<div id="close" class="button">
<div class='icon close'></div> Close
</div>
</li>
</ul>
</div>
</div>
</li>
<li>Home</li>
<li>Help</li>
</ul>
<div>
<div style="overflow:hidden;">
</div>
<div style="overflow:hidden;">
<table class="buttonHolderTable" id="clipBoardTable">
<tr>
<td rowspan="3" style="text-align: center; vertical-align: initial; height: 70px; font-size:10px">
<div id="paste" style="width: 50px;">
<div id="pasteButton"><span class="icon page_paste" style="zoom:1.5"></span><span class="pasteText">Paste</span>
</div>
<div id="pasteDropDown" style="margin-top: -3px; margin-left:10px;"></div>
</div>
</td>
<td class="firstrow" rowspan="1">
<div id="cutButton"><div class='icon cut_red'></div>
<span class="cutText">Cut</span></div>
</td>
</tr>
<tr>
<td class="secondrow">
<div id="copyButton"><div class='icon page_copy'></div>
<span class="copyText">Copy</span></div>
</td>
</tr>
<tr>
<td class="thirdrow">
<div id="formatPainter"><div class='icon FormatPainterImage'></div>
<span class="formatPainter">Format Painter</span>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="font-size: 9px; text-align: center; top: -3px; position: relative;">
Clipboard
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
<table class="buttonHolderTable" style="float: left;">
<tr>
<td colspan="4">
<div id="font">
</div>
</td>
<td>
<div id="fontSize">
</div>
</td>
<td>
<div id="growFont"><div class='icon fontsizeincrease16'></div></div>
</td>
<td>
<div id="shrinkFont"><div class='icon fontsizedecrease16'></div></div>
</td>
<td>
<div id="clearFormatting"><div class='icon ClearFormattingImage'></div></div>
</td>
<td>
<div id="changeCase"></div>
</td>
</tr>
<tr class="secondrow">
<td colspan="8">
<div id="fontColor">
<div style="padding: 3px;">
<div id="fontColorPicker">
</div>
</div>
</div>
<div class="separator"></div>
<div id="highlightColor">
<div style="padding: 3px;">
<div id="highlightColorPicker">
</div>
</div>
</div>
</td>
</tr>
<tr class="thirdrow">
<td colspan="8">
<div id="superscript">
<div class='icon text_superscript'></div>
</div>
<div id="subscript">
<div class='icon text_subscript'></div>
</div>
<div class="separator" style="top: 3px;"></div>
<div id="bold">
<div class='icon text_bold'></div>
</div>
<div id="italic">
<div class='icon text_italic'></div>
</div>
<div id="underline">
<div class='icon text_underline'></div>
</div>
<div id="strikethrough">
<div class='icon text_strikethrough'></div>
</div>
</td>
</tr>
<tr>
<td colspan="9" style="font-size: 9px; text-align: center;">
Font
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
<table class="buttonHolderTable" style="float: left;">
<tr class="firstrow">
<td colspan="8">
<div id="bulletList">
<div class='icon text_list_bullets'></div>
</div>
<div id="numberedList">
<div class='icon text_list_numbers'></div>
</div>
<div id="decreaseIndent">
<div class='icon text_indent'></div>
</div>
<div id="increaseIndent">
<div class='icon text_indent_remove'></div>
</div>
<div id="Sort">
<div class='icon SortHS'></div>
</div>
<div id="bucketColor" style="vertical-align: top;">
<div style="padding: 3px;">
<div id="bucketColorPicker">
</div>
</div>
</div>
</td>
</tr>
<tr class="secondrow">
<td colspan="8">
<div id="alignLeft">
<div class='icon text_align_left'></div>
</div>
<div id="alignCenter">
<div class='icon text_align_center'></div>
</div>
<div id="alignRight">
<div class='icon text_align_right'></div>
</div>
<div id="alignJustify">
<div class='icon text_align_justify'></div>
</div>
<div class="separator" style="top:5px; height: 15px;"></div>
<div id="lineSpacing">
<div class='icon text_linespacing'></div>
</div>
<div id="showHide">
<div class='icon ShowParagraphMarksImage'></div>
</div>
</td>
</tr>
<tr>
<td style="height: 43px; text-align: center; vertical-align: bottom; font-size:9px;">
Alignment
</td>
</tr>
</table>
<div class="sectionSeparator">
</div>
</div>
<div style="overflow:hidden;">
<table class="buttonHolderTable" 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="grid">
</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>