jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
89 lines (82 loc) • 4.74 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Events" />
<meta name="description" content="jqxDocking has events which are connected with some actions on the windows inside. Common events which probably you'll need
to handle are the dragEnd and dragStart event. You can see these events down in the demo." />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title id='Description'>This demo illustrates how to handle the jqxDocking events. Drag a window and drop it anywhere to see the handled event.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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/jqxwindow.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdocking.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#docking').jqxDocking({ orientation: 'horizontal', width: getWidth('docking'), mode: 'default' });
$('#docking').jqxDocking('hideAllCloseButtons');
$('#events').jqxPanel({ height: '50px', width: '450px' });
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function displayEvent(event) {
var eventData = 'Event: <span style="font-style: italic;">' + capitaliseFirstLetter(event.type) + '</span>';
eventData += '<strong>' + $('#' + event.args.window).jqxWindow('title') + '</strong>';
$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
$('#docking').on('dragEnd', function (event) {
displayEvent(event);
});
$('#docking').on('dragStart', function (event) {
$("#events").jqxPanel('clearcontent');
displayEvent(event);
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="events" style="border-width: 0px; float: left;
margin-left: 30px;">
</div>
<div id="docking" style="float: left;">
<div>
<div id="window0" style="height: 150px">
<div>
CISC</div>
<div>
Before the RISC philosophy became prominent, many computer architects tried to bridge
the so called semantic gap, i.e. to design instruction sets that directly supported
high-level programming constructs such as procedure calls, loop control, and complex...</div>
</div>
<div id="window1" style="height: 150px">
<div>
Database management system</div>
<div>
A database management system (DBMS) is a software package with computer programs
that control the creation, maintenance, and the use of a database. It allows organizations
to conveniently develop databases...</div>
</div>
</div>
<div>
<div id="window2" style="height: 150px">
<div>
RISC</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage...</div>
</div>
</div>
</div>
</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>