Javascript 使两个文本区域并排共享一个灵活的边框
我想制作两个并排的文本区域,它们共享相同的边界。然后我们可以拖动边界并更改其宽度,同时保持其宽度之和不变。换句话说,它就像JSBin中的面板 有人知道如何实现这一点吗 PS:下面是并排创建两个固定文本区域的代码:Javascript 使两个文本区域并排共享一个灵活的边框,javascript,css,flexbox,jquery-ui-resizable,Javascript,Css,Flexbox,Jquery Ui Resizable,我想制作两个并排的文本区域,它们共享相同的边界。然后我们可以拖动边界并更改其宽度,同时保持其宽度之和不变。换句话说,它就像JSBin中的面板 有人知道如何实现这一点吗 PS:下面是并排创建两个固定文本区域的代码: <!DOCTYPE html> <html> <head> <title>JS Bin</title> </head> <body> <textarea name="t1"><
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<textarea name="t1"></textarea>
<textarea name="t2"></textarea>
</body>
</html>
编辑2:
根据Ankit vadariya的回答,我已经。。。剩下的只有一件事:如何确保面板右侧的最小宽度
?目前似乎不起作用
一种方法是设置左侧面板的最大宽度
,但如果我们查看JSBin,每个面板的最大宽度
没有限制,而最小宽度
…
希望它对你有用
代码
CSS
HTML
简单拆分面板-jquery可调整大小
jquery可调整大小-一个简单的拆分器面板
演示如何创建可滑动的双窗格布局和可调整大小的插件的简单示例。
请注意,Flexbox不是必需的,但在这里用于保持布局简单。
水平拆分窗格:
左面板
右面板
垂直拆分窗格:
顶板
底板
此示例为水平和垂直拆分器窗格创建两个可调整大小的窗格:
script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”/script
script src=“../src/jquery resizeable.js”/script
剧本
$(“.panel left”)。可调整大小({
handleSelector:“.splitter”,
resizeHeight:false
});
$(“.panel top”)。可调整大小({
无手柄选择器:“.splitter horizontal”,
resizeWidth:false
});
/剧本
我能看到的唯一方法是使用类似JavaScript的东西,实时分析其中一个的宽度,让另一个增加到100%。你试过什么吗?看看这个:https://jqueryui.com/resizable/
您需要让文本区域100%位于可调整大小的div内。下面是可调整大小的
,我不知道如何保持两个宽度之和不变。这不是标准文本区域的工作方式。您必须使用JS创建自己的,这可能不是您真正想要的。@andi,例如,JSBin仍然使用textareas。请查看我的更新。@Thomas您在标记中看到的s实际上是用CSS隐藏的,然后您看到的所有其他内容都是用JS构建的。这不显示操作特别要求的文本区域。您可以用文本区域替换它。将CSS设为文本区域的隐藏边框,并将文本区域设为100%的父区域。谢谢,我认为这将帮助他,只要他是与使用该插件确定。我已经更新,请检查并让我知道
<div id="panelswaiting">
<div class="code stretch html panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a href="#htmlprocessors" role="menuitem" class="fake-dropdown button-dropdown">Processor</a></strong></span><div class="dropdown" id="htmlprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html">
<a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a>
<a role="menuitemradio" href="#markdown">Markdown</a>
<a role="menuitemradio" href="#jade">Jade</a>
<a href="#convert">Convert to HTML</a>
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
</div>
</div>
<div class="code stretch javascript panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span>
<div class="dropdown" id="javascriptprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript">
<a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a>
<a role="menuitemradio" href="#babel">ES6 / Babel</a>
<a role="menuitemradio" href="#jsx">JSX (React)</a>
<a role="menuitemradio" href="#coffeescript">CoffeeScript</a>
<a role="menuitemradio" href="#traceur">Traceur</a>
<a role="menuitemradio" href="#typescript">TypeScript</a>
<a role="menuitemradio" href="#processing">Processing</a>
<a role="menuitemradio" href="#livescript">LiveScript</a>
<a role="menuitemradio" href="#clojurescript">ClojureScript</a>
<a role="menuitem" href="#convert">Convert to JavaScript</a>
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
</div>
</div>
...
</div>
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
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;
/* avoid browser level touch actions */
xtouch-action: none;
}
.panel-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 {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
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(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
cursor: row-resize;
}
.panel-bottom {
flex: 1 1 auto;
/* resizable */
padding: 10px;
min-height: 200px;
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;
}
<html>
<head>
<title>Simple Split Panels - jquery-resizable</title>
<meta charset="utf-8"/>
</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 <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> 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>
<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>
<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>
</body>
</html>