jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
925 lines (816 loc) • 38.6 kB
HTML
<html lang="en">
<head>
<title id='Description'>Ribbon Custom element DefaultFunctionality</title>
<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" />
<meta name="description" content="This is an example of default functionalities in Custom element Ribbon." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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>
<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>
JQXElements.settings['fileItemButtonSettings'] =
{
arrowSize: 0, height: 26, dropDownWidth: 120, width: 50, theme: 'demoTheme'
}
document.querySelectorAll("#save, #saveAs, #open, #close, #exit").theme = 'demoTheme';
JQXElements.settings['ribbonSettings'] =
{
width: '100%',
height: 200,
animationType: "none",
selectionMode: "click",
position: "top",
theme: "demoTheme",
mode: "default",
selectedIndex: 1,
initContent: function (item) {
switch (item) {
case 0:
break;
case 1:
var myToggleButtons = document.querySelectorAll("#subscript, #superscript, #bold, #italic, #underline, #strikethrough");
myToggleButtons.theme = 'demoTheme';
var myButtons = document.querySelectorAll("#shrinkFont, #copyButton, #cutButton, #growFont, #formatPainter, #clearFormatting, #alignLeft, #alignCenter, #alignRight, #alignJustify, #bulletList, #numberedList, #decreaseIndent, #increaseIndent, #Sort, #lineSpacing, #showHide")
myButtons.theme = 'demoTheme';
var myBucketColor = document.createElement('jqx-drop-down-button');
myBucketColor.settings =
{
width: 42,
height: 19,
theme: "demoTheme",
dropDownWidth: 180,
initContent: function () {
JQXElements.settings['bucketColorPickerSettings'] = {
color: "000000",
colorMode: 'hue',
width: 180,
theme: 'demoTheme',
height: 180
};
document.getElementById('bucketColorPicker').addEventListener('colorchange', function (event) {
document.getElementById("bucketColorPreview").style.background = '#' + event.args.color.hex;
});
}
}
console.log(myBucketColor);
var fontSource = [
"<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>"
];
var myFont = document.createElement('jqx-drop-down-list');
myFont.settings =
{
source: fontSource,
width: 120,
height: 21,
theme: 'demoTheme',
autoDropDownHeight: true,
selectedIndex: 1
};
var fontSizeSource = [8, 9, 10, 11, 12, 14, 18, 20, 22, 24];
var myFontSize = document.createElement('jqx-drop-down-list');
myFontSize.settings =
{
source: fontSizeSource,
theme: 'demoTheme',
renderer: function (index, label, value) {
return '<span style="font-size:' + value + 'px;">' + value + '</span>';
},
width: 70, height: 21, autoDropDownHeight: true, selectedIndex: 2
};
var changeCaseSource = ['Sentence Case', 'lowercase', 'UPPERCASE', 'Capitalize Each Word'];
var myChangeCase = document.createElement('jqx-drop-down-list');
myChangeCase.settings =
{
source: changeCaseSource,
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
};
var myFontColor = document.createElement('jqx-drop-down-button');
myFontColor.settings =
{
width: 100,
theme: 'demoTheme',
dropDownWidth: 180,
height: 21,
initContent: function () {
JQXElements.settings['fontColorPickerSettings'] = {
color: "000000",
colorMode: 'hue',
theme: 'demoTheme',
width: 180,
height: 180
};
document.getElementById('fontColorPicker').addEventListener('colorchange', function (event) {
document.getElementById("fontColorPreview").style.background = '#' + event.args.color.hex;
});
}
}
var myHighlightColor = document.createElement('drop-down-button');
myHighlightColor.settings =
{
width: 130,
dropDownWidth: 180,
theme: 'demoTheme',
height: 21,
initContent: function () {
JQXElements.settings['highlightColorPickerSettings'] = {
color: "FF0000",
theme: 'demoTheme',
colorMode: 'hue',
width: 180,
height: 180
}
Document.getElementById('highlightColorPicker').addEventListener('colorchange', function (event) {
document.getElementById("highlightColorPreview").style.background = '#' + event.args.color.hex;
});
}
}
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' }
];
var myPasteButton = document.createElement('jqx-button');
myPasteButton.settings =
{
width: 35,
theme: 'demoTheme',
height: 56
}
var myPasteDropDown = document.createElement('jqx-drop-down-list');
myPasteDropDown.settings =
{
source: pasteData,
width: 22,
height: 10,
theme: 'demoTheme',
animationType: 'none',
dropDownWidth: '110px',
autoDropDownHeight: true,
placeHolder: "Select...",
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
}
myBucketColor.appendChild(document.getElementById('bucketColor'));
myFont.appendChild(document.getElementById('font'));
myFontSize.appendChild(document.getElementById('fontSize'));
myPasteDropDown.appendChild(document.getElementById('pasteDropDown'));
break;
case 2:
document.querySelectorAll("#help, #about, #update").settings = { width: 26, height: 26, theme: 'demoTheme' };
break;
}
}
};
window.onload = function () {
document.querySelector('jqx-ribbon').disableAt(0);
document.getElementById('fileItemButton').setContent('<span style="position: relative; line-height: 26px; margin-left:10px;">File</span>');
//document.getElementById('highlightColor').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 myFontColor = document.getElementById('fontColor');
//myFontColor.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>');
//var myBucketColor = document.getElementById('bucketColor');
//myBucketColor.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>');
document.getElementById("subscript").addEventListener('click', function () {
if (document.getElementById('superscript').toggled) {
document.getElementById('superscript').toggled = false
}
});
document.getElementById("superscript").addEventListener('click', function () {
if (document.getElementById('subscript').toggled) {
document.getElementById('subscript').toggled = false
}
});
document.getElementById('pasteButton').addEventListener('click', function (event) {
var text = $(this).find('.pasteText').html();
console.log(text + ' clicked');
});
document.getElementById('pasteButton').addEventListener('mousedown', function (event) {
event.preventDefault();
});
//document.getElementById('pasteDropDown').addEventListener('select', function (event) {
// var index = event.args.index;
// var icon = '<span class="' + pasteData[index].imageClass + '" style="zoom: 1.5"></span>';
// document.getElementById('pasteButton').innerHTML = icon + '<span class="pasteText">' + pasteData[index].label + '</span>';
// document.getElementById('pasteButton').render();
//});
var numberrenderer = function (row, column, value) {
return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
};
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);
var myGrid = document.createElement('jqx-grid');
myGrid.settings = {
width: '100%',
source: dataAdapter,
editable: true,
columnsresize: true,
selectionmode: 'multiplecellsadvanced',
columns: columns
}
document.getElementById('grid').appendChild(myGrid);
}
</script>
</head>
<body>
<div class="example-description">
This is an example of default functionalities in Custom element Ribbon
</div>
<jqx-ribbon id="ribbon" settings="ribbonSettings">
<ul>
<li id="fileItem">
<jqx-drop-down-button id="fileItemButton" settings="fileItemButtonSettings">
<div style="height:103px;">
<ul style="list-style-type: none; margin:0px; padding: 3px;">
<li>
<jqx-button id="save" class="button">
<div class='icon SaveImage'></div> Save
</jqx-button>
</li>
<li>
<jqx-button id="saveAs" class="button">
<div class='icon SaveSelectionImage'></div> Save As
</jqx-button>
</li>
<li>
<jqx-button id="open" class="button">
<div class='icon folder'></div> Open
</jqx-button>
</li>
<li>
<jqx-button id="close" class="button">
<div class='icon close'></div> Close
</jqx-button>
</li>
</ul>
</div>
</jqx-drop-down-button>
</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">
<jqx-button id="cutButton">
<div class='icon cut_red'></div>
<span class="cutText">Cut</span>
</jqx-button>
</td>
</tr>
<tr>
<td class="secondrow">
<jqx-button id="copyButton">
<div class='icon page_copy'></div>
<span class="copyText">Copy</span>
</jqx-button>
</td>
</tr>
<tr>
<td class="thirdrow">
<jqx-button id="formatPainter">
<div class='icon FormatPainterImage'></div>
<span class="formatPainter">Format Painter</span>
</jqx-button>
</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>
</jqx-ribbon>
<div id="grid">
</div>
</body>
</html>