jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
94 lines (91 loc) • 5.21 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
<meta name="description" content="This demonstration shows how to use the jqxSplitter API." />
<title id='Description'>This demonstration shows how to use the jqxSplitter API.
</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="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxsplitter.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 type="text/javascript">
$(document).ready(function () {
var panels = [{ size: 250 }];
$('#mainSplitter').jqxSplitter({ height: 600, width: 850, panels: panels });
$('#expandFirstButton').jqxButton({ width: 90 });
$('#expandLastButton').jqxButton({ width: 90 });
$('#collapseFirstButton').jqxButton({ width: 95 });
$('#collapseLastButton').jqxButton({ width: 95 });
$('#enableButton').jqxButton({ width: 80 });
$('#disableButton').jqxButton({ width: 80 });
$('#orientationButton').jqxButton({ width: 90 });
$('#expandFirstButton').click(function () {
panels[0].collapsible = true;
panels[1].collapsible = false;
$('#mainSplitter').jqxSplitter({panels: panels});
$('#mainSplitter').jqxSplitter('expand');
});
$('#expandLastButton').click(function () {
panels[0].collapsible = false;
panels[1].collapsible = true;
$('#mainSplitter').jqxSplitter({ panels: panels });
$('#mainSplitter').jqxSplitter('expand');
});
$('#collapseFirstButton').click(function () {
panels[0].collapsible = true;
panels[1].collapsible = false;
$('#mainSplitter').jqxSplitter({ panels: panels });
$('#mainSplitter').jqxSplitter('collapse');
});
$('#collapseLastButton').click(function () {
panels[0].collapsible = false;
panels[1].collapsible = true;
$('#mainSplitter').jqxSplitter({ panels: panels });
$('#mainSplitter').jqxSplitter('collapse');
});
$('#enableButton').click(function () {
$('#mainSplitter').jqxSplitter('enable');
});
$('#disableButton').click(function () {
$('#mainSplitter').jqxSplitter('disable');
});
$('#orientationButton').click(function () {
var currentOrientation = $('#mainSplitter').jqxSplitter('orientation');
if (currentOrientation === 'vertical') {
$('#mainSplitter').jqxSplitter('orientation', 'horizontal');
} else {
$('#mainSplitter').jqxSplitter('orientation', 'vertical');
}
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="container" style="float: left;">
<input type="button" style='margin-top: 5px;' value="Orientation" id="orientationButton" />
<input type="button" style='margin-top: 5px;' value="Expand first" id="expandFirstButton" />
<input type="button" style='margin-top: 5px;' value="Expand last" id="expandLastButton" />
<input type="button" style='margin-top: 5px;' value="Collapse first" id="collapseFirstButton" />
<input type="button" style='margin-top: 5px;' value="Collapse last" id="collapseLastButton" />
<input type="button" style='margin-top: 5px;' value="Enable" id="enableButton" />
<input type="button" style='margin-top: 5px;' value="Disable" id="disableButton" />
<br /><br />
<div id="mainSplitter">
<div style="background-color:#F5FFF2;"></div>
<div style="background-color:#EBF1FF;"></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>