jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
152 lines (142 loc) • 7.47 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Window, Window Widget, Window" />
<meta name="description" content="Show, Hide, Pin, Unpin or Open and Close the jqxWindow through its API functions." />
<title id='Description'>Show, Hide, Pin, Unpin or Open and Close the jqxWindow through its API functions.</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/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
var customButtonsDemo = (function () {
var _collapsed = false;
function _addEventListeners() {
$('#showWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('open');
});
$('#hideWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('close');
});
$('#pinWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('draggable', false);
});
$('#unpinWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('draggable', true);
});
_addCustomButtonsHandlers();
_addSearchInputEventHandlers();
};
function _addCustomButtonsHandlers() {
$('#pinButton').mousedown(function () {
if ($('#customWindow').jqxWindow('draggable')) {
$('#customWindow').jqxWindow('draggable', false);
} else {
$('#customWindow').jqxWindow('draggable', true);
}
});
$('#collapseWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('collapse');
});
$('#expandWindowButton').mousedown(function () {
$('#customWindow').jqxWindow('expand');
});
};
function _addSearchInputEventHandlers() {
$('#searchTextInput').keydown(function () {
_searchButtonHandle();
});
$('#searchTextInput').change(function () {
_searchButtonHandle();
});
$('#searchTextInput').keyup(function () {
_searchButtonHandle();
});
$(document).mousemove(function () {
_searchButtonHandle();
});
};
function _searchButtonHandle() {
if ($('#searchTextButton').length > 0) {
if ($('#searchTextInput').val() !== '') {
$('#searchTextButton').jqxButton('disabled', false);
} else {
$('#searchTextButton').jqxButton('disabled', true);
}
$('#cancelButton').jqxButton('disabled', false);
}
};
function _createElements() {
var mainDemoContainer = $('#mainDemoContainer');
var offset = mainDemoContainer.offset();
$('#showWindowButton').jqxButton({ width: '80px' });
$('#hideWindowButton').jqxButton({ width: '80px' });
$('#pinWindowButton').jqxButton({ width: '80px' });
$('#unpinWindowButton').jqxButton({ width: '80px' });
$('#collapseWindowButton').jqxButton({ width: '80px' });
$('#expandWindowButton').jqxButton({ width: '80px' });
$('#customWindow').jqxWindow({ width: 400,
height: 110, resizable: false,
cancelButton: $('#cancelButton'),
position: { x: offset.left + 50, y: offset.top + 50},
initContent: function () {
$('#searchTextButton').jqxButton({ width: '80px', disabled: true });
$('#cancelButton').jqxButton({ width: '80px', disabled: false });
$('#matchCaseCheckBox').jqxCheckBox({ width: '150px' });
}
});
};
return {
init: function () {
_createElements();
_addEventListeners();
}
};
} ());
$(document).ready(function () {
customButtonsDemo.init();
});
</script>
</head>
<body class='default'>
<div style="width: 100%; height: 650px;" id="jqxWidget">
<input type="button" value="Open" id="showWindowButton" />
<input type="button" value="Close" id="hideWindowButton" style="margin-left: 3px" />
<input type="button" value="Pin" id="pinWindowButton" style="margin-left: 3px" />
<input type="button" value="Unpin" id="unpinWindowButton" style="margin-left: 3px" />
<input type="button" value="Collapse" id="collapseWindowButton" style="margin-left: 3px" />
<input type="button" value="Expand" id="expandWindowButton" style="margin-left: 3px" />
<div
id="mainDemoContainer">
<div id="customWindow">
<div id="customWindowHeader">
<span id="captureContainer" style="float: left">Find </span>
</div>
<div id="customWindowContent" style="overflow: hidden">
<div style="margin: 10px">
Fi<u>n</u>d what:
<input type="text" style="width: 175px; border: 1px solid #aaa" id="searchTextInput" />
<div style="float: right">
<input type="button" value="Find Next" style="margin-bottom: 5px;" id="searchTextButton" /><br />
<input type="button" value="Cancel" id="cancelButton" />
</div>
<br />
<br />
<div id="matchCaseCheckBox">
Match case</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>