mirror of
https://codeberg.org/streams/streams.git
synced 2024-09-19 22:15:15 +00:00
242 lines
6.7 KiB
HTML
242 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Simple Split Panels - jquery-resizable</title>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
padding:0;
|
|
margin: 0;
|
|
overflow: auto;
|
|
}
|
|
.page-container { margin: 20px; }
|
|
|
|
/* horizontal panel*/
|
|
.panel-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid silver;
|
|
overflow: hidden;
|
|
}
|
|
.panel-left,.panel2-left {
|
|
flex: 0 0 auto; /* only manually resize */
|
|
padding: 10px;
|
|
width: 300px;
|
|
min-height: 200px;
|
|
min-width: 150px;
|
|
white-space: nowrap;
|
|
|
|
background: #838383;
|
|
color: white;
|
|
}
|
|
.splitter, .splitter2,.splitter3 {
|
|
flex: 0 0 auto;
|
|
width: 18px;
|
|
background: url(../assets/vsizegrip.png) center center no-repeat #535353;
|
|
min-height: 200px;
|
|
cursor: col-resize;
|
|
}
|
|
.panel-right, .panel2-right {
|
|
flex: 1 1 auto; /* resizable */
|
|
padding: 10px;
|
|
width: 100%;
|
|
min-height: 200px;
|
|
min-width: 200px !important; /* NOTE: This won't be respected! Explicit size of left forces the size to be fixed */
|
|
background: #eee;
|
|
}
|
|
|
|
/* vertical panel */
|
|
.panel-container-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 500px;
|
|
border: 1px solid silver;
|
|
overflow: hidden;
|
|
}
|
|
.panel-top {
|
|
flex: 0 0 auto; /* only manually resize */
|
|
padding: 10px;
|
|
height: 150px;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
|
|
background: #838383;
|
|
color: white;
|
|
}
|
|
.splitter-horizontal {
|
|
flex: 0 0 auto;
|
|
height: 18px;
|
|
background: url(../assets/hsizegrip.png) center center no-repeat #535353;
|
|
cursor: row-resize;
|
|
}
|
|
.panel-bottom {
|
|
flex: 1 1 auto; /* resizable */
|
|
padding: 10px;
|
|
min-height: 200px !important; /* NOTE: This won't be respected! Explicit resize forces size of this panel */
|
|
background: #eee;
|
|
}
|
|
label {
|
|
font-size: 1.2em;
|
|
display: block;
|
|
font-weight: bold;
|
|
margin: 30px 0 10px;
|
|
}
|
|
pre {
|
|
margin: 20px;
|
|
padding: 10px;
|
|
background: #eee;
|
|
border: 1px solid silver;
|
|
border-radius: 4px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="">
|
|
<div class="page-container">
|
|
|
|
<h1>
|
|
jquery-resizable - A simple splitter panel
|
|
</h1>
|
|
<hr />
|
|
|
|
<p>
|
|
Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in.
|
|
Note that Flexbox is not required, but used here to keep the layout simple.
|
|
</p>
|
|
|
|
<label>Horizontal Splitter Panes:</label>
|
|
|
|
<div class="panel-container">
|
|
|
|
<div class="panel-left">
|
|
left panel
|
|
</div>
|
|
|
|
<div class="splitter">
|
|
</div>
|
|
|
|
|
|
<div class="panel-right">
|
|
right panel
|
|
</div>
|
|
</div>
|
|
<button id="btnUnbind" style="margin: 30px 0 0; height: 35px; width: 190px;">Unbind Horizontal Resizers</button>
|
|
|
|
<div class="panel-container" style="margin-top: 50px;">
|
|
|
|
<div class="panel-left">
|
|
left panel (same ids)
|
|
</div>
|
|
|
|
<div class="splitter">
|
|
</div>
|
|
|
|
<div class="panel-right">
|
|
right panel (same ids)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-container" style="margin-top: 50px;">
|
|
<div class="panel2-left">
|
|
left panel 2
|
|
</div>
|
|
|
|
<div class="splitter2">
|
|
</div>
|
|
|
|
<div class="panel2-right">
|
|
right panel 2
|
|
</div>
|
|
</div>
|
|
|
|
<label>Vertical Splitter Panes:</label>
|
|
<div class="panel-container-vertical">
|
|
|
|
<div class="panel-top">
|
|
top panel
|
|
</div>
|
|
|
|
<div class="splitter-horizontal">
|
|
</div>
|
|
|
|
<div class="panel-bottom">
|
|
bottom panel
|
|
</div>
|
|
</div>
|
|
|
|
<label>Horizontal Splitter Panes with IFrame:</label>
|
|
|
|
<div class="panel-container">
|
|
|
|
<div class="panel-left">
|
|
left panel
|
|
</div>
|
|
|
|
<div class="splitter">
|
|
</div>
|
|
|
|
|
|
<div class="panel-right" style="padding: 0;">
|
|
<iframe src="https://weblog.west-wind.com/posts/2015/Dec/21/A-small-jQuery-Resizable-Plugin"
|
|
style="width: 100%; height: 100%; border: none"></iframe>
|
|
</div>
|
|
</div>
|
|
<button id="btnUnbind" style="margin: 30px 0 0; height: 35px; width: 190px;">Unbind Horizontal Resizers</button>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
<p>
|
|
This example creates two resizables for the horizontal and vertical splitter panes:
|
|
</p>
|
|
|
|
|
|
|
|
<pre>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
<script src="../src/jquery-resizable.js"></script>
|
|
<script>
|
|
$(".panel-left").resizable({
|
|
handleSelector: ".splitter",
|
|
resizeHeight: false
|
|
});
|
|
$(".panel-top").resizable({
|
|
handleSelector: ".splitter-horizontal",
|
|
resizeWidth: false
|
|
});
|
|
</script>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="../src/jquery-resizable.js"></script>
|
|
<script>
|
|
$(".panel-left").resizable({
|
|
handleSelector: ".splitter",
|
|
resizeHeight: false
|
|
});
|
|
|
|
$(".panel2-left").resizable({
|
|
handleSelector: ".splitter2",
|
|
resizeHeight: false
|
|
});
|
|
|
|
$(".panel-top").resizable({
|
|
handleSelector: ".splitter-horizontal",
|
|
resizeWidth: false
|
|
});
|
|
|
|
$("#btnUnbind").on("click",
|
|
function () {
|
|
$(".panel-left").resizable("destroy");
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|