jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
669 lines (585 loc) • 23.2 kB
HTML
<html>
<head>
<title id="Description">This demo showcases an Office-like ribbon. TypeScript example.</title>
<meta name="description" content="This demo showcases an Office-like ribbon." />
<!-- 1. Load references -->
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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;
}
#jqxgrid {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#jqxRibbon, #jqxRibbon div, #jqxRibbon li {
font-size: 11px;
}
#jqxRibbon li {
line-height: 16px;
}
#jqxRibbon, .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 src="../../../scripts/jquery-1.11.1.min.js"></script>
<script src="../../../scripts/demos.js"></script>
<script src="../../../jqwidgets/jqxcore.js"></script>
<script src="../../../jqwidgets/jqxdata.js"></script>
<script src="../../../jqwidgets/jqxscrollbar.js"></script>
<script src="../../../jqwidgets/jqxmenu.js"></script>
<script src="../../../jqwidgets/jqxgrid.js"></script>
<script src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="../../../jqwidgets/jqxlistbox.js"></script>
<script src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script src="../../../jqwidgets/jqxdropdownbutton.js"></script>
<script src="../../../jqwidgets/jqxcolorpicker.js"></script>
<script src="../../../jqwidgets/jqxbuttons.js"></script>
<script src="../../../jqwidgets/jqxcheckbox.js"></script>
<script src="../../../jqwidgets/jqxtooltip.js"></script>
<script src="../../../jqwidgets/jqxribbon.js"></script>
<script src="typescript-ribbon.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<!-- 2. Create initialization -->
<script>
$(document).ready(function () {
createRibbon(
'#jqxRibbon', '#fileItemButton', '#save', '#saveAs', '#open', '#close', '#exit',
'#subscript', '#superscript', '#bold', '#italic', '#underline', '#strikethrough',
'#shrinkFont', '#copyButton', '#cutButton', '#growFont', '#formatPainter', '#clearFormatting', '#alignLeft', '#alignCenter', '#alignRight', '#alignJustify', '#bulletList', '#numberedList', '#decreaseIndent', '#increaseIndent', '#Sort', '#lineSpacing', '#showHide',
'#bucketColor', '#bucketColorPicker', '#font', '#fontSize',
'#changeCase', '#fontColor', '#fontColorPicker', '#highlightColor', '#highlightColorPicker', '#pasteButton', '#pasteDropDown',
'#help', '#about', '#update',
'#jqxgrid'
);
});
</script>
</head>
<!-- 3. Display the application -->
<body>
<div class="example-description">
This demo showcases an Office-like ribbon. TypeScript example.
</div>
<div id="jqxRibbon">
<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="jqxgrid">
</div>
</body>
</html>