jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
113 lines (108 loc) • 6.24 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Window, Window Widget, Window" />
<meta name="description" content="With jqxWindow, you can create create multiple windows and display them at the same time on your page." />
<title id='Description'>With jqxWindow, you can create create multiple windows and display them at the same time on your page.</title>
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/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">
function removeAll(collection) {
if (!collection) {
return;
}
var count = collection.length;
while (count) {
count -= 1;
collection[count].remove();
}
}
function addEventListeners() {
addEventListeners.windowsCount = 1;
$('#showWindowButton').mousedown(function () {
var window = $.data(document.body, 'jqxwindows-list'),
count = window.length;
while (count) {
count -= 1;
$(window[count]).jqxWindow('open');
}
});
$('#addWindowButton').mousedown(function () {
if (addEventListeners.windowsCount < 3) {
$(document.body).append('<div id="newWindow' + addEventListeners.windowsCount + '"><div>Header ' + addEventListeners.windowsCount
+ '</div><div>Content of window ' + addEventListeners.windowsCount + '</div></div>');
var mainDemoContainer = $('#mainDemoContainer');
$('#newWindow' + addEventListeners.windowsCount).jqxWindow({ height: 150, width: 300});
addEventListeners.windowsCount += 1;
}
});
}
function createElements() {
//Creating the new windows
var mainDemoContainer = $('#mainDemoContainer');
var offset = mainDemoContainer.offset();
$('#window0').jqxWindow({ height: 'auto', width: 300, position: { x: offset.left + 50, y: offset.top + 50} });
//Removing all elements
$('#window1').jqxWindow({ height: 'auto', width: 300, position: { x: offset.left + 100, y: offset.top + 100} });
$('#window2').jqxWindow({ height: 'auto', width: 300, position: { x: offset.left + 150, y: offset.top + 150} });
$('#showWindowButton').jqxButton({ width: '120px'});
$('#addWindowButton').jqxButton({ width: '100px' });
}
$(document).ready(function () {
windowsCount = 1;
createElements();
addEventListeners();
});
</script>
</head>
<body class='default'>
<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 15px;">
<input type="button" value="Show Windows" id="showWindowButton" />
<input type="button" value="Add Windows" id="addWindowButton" style="margin-left: 3px" />
<div id="mainDemoContainer">
<div id="window0">
<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 of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...</div>
</div>
<div id="window1">
<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
addressing modes, allowing data structure and array accesses to be combined into
single instructions. Instructions are also typically highly encoded in order to
further enhance the code density...</div>
</div>
<div id="window2">
<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 for various applications by database administrators
(DBAs) and other specialists. A database is an integrated collection of data records,
files, and other database objects...</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>