jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
129 lines (113 loc) • 4.91 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Elements Window Events</title>
<meta name="description" content="his is an example of the events that occur in Custom Elements Window." />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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/jqxwindow.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['windowSettings'] =
{
maxHeight: 260,
maxWidth: 280,
minHeight: 30,
minWidth: 250, isModal: true,
modalOpacity: 0.3,
height: 155,
resizable: false,
position: { x: 90, y: 140 }
};
var capitaliseFirstLetter = function (string) {
return string.charAt(0).toUpperCase() + string.slice(1);
};
var eventHandler = function (event) {
var eventData = 'Event: ' + capitaliseFirstLetter(event.type);
if (event.type === 'moved') {
eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
}
if (event.type === 'close') {
eventData += ', Dialog result: ';
if (event.args.dialogResult.OK) {
eventData += 'OK';
} else if (event.args.dialogResult.Cancel) {
eventData += 'Cancel';
} else {
eventData += 'None';
}
}
var logPanel = document.querySelector('jqx-panel');
logPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
};
function addEventListeners(widget) {
//Closed event
widget.addEventListener('close', function (event) {
eventHandler(event);
});
//Dragstarted event
widget.addEventListener('moved', function (event) {
eventHandler(event);
});
//Open event
widget.addEventListener('open', function (event) {
eventHandler(event);
});
};
window.onload = function () {
var myWindow = document.querySelector('jqx-window');
//var myPanel = document.querySelector('jqx-panel');
var myButtons = document.querySelectorAll('jqx-button');
console.log(myButtons);
addEventListeners(myWindow);
myButtons[0].addEventListener('click', function() {
myWindow.open();
});
myButtons[1].addEventListener('click', function() {
myWindow.close();
});
myButtons[2].addEventListener('click', function() {
myWindow.close();
});
};
</script>
<style>
jqx-panel * {
border: none ;
}
</style>
</head>
<body>
<div class="example-description">
This demo demonstrates how to trigger some of the Window events like open, closed and moved.
</div>
<jqx-button>Show</jqx-button>
<div style="margin-top: 10px;">Events Log:</div>
<jqx-panel width="450" height="250" style="border: none"></jqx-panel>
<jqx-window settings="windowSettings">
<div>
<img width="14" height="14" src="../../../images/help.png" alt="" />
Modal Window
</div>
<div>
<div>
Please click "OK", "Cancel" or the close button to close the modal window. The dialog
result will be displayed in the events log.
</div>
<div style="float: right; margin-top: 15px;">
<div style="float: right;">
<jqx-button>OK</jqx-button>
<jqx-button>Cancel</jqx-button>
</div>
</div>
</div>
</jqx-window>
</body>
</html>