jQuery UIを使用すると、1つのようなスプリッタの種類の機能をどうすれば http://methvin.com/splitter/3csplitter.htmlにすることができますか？jQuery UIとスプリッタ
私のページには2つのことが必要です。 ポートレット（ドラッグ可能）:: http://jqueryui.com/sortable/#portlets と垂直スプリッタ:: http://methvin.com/splitter/3csplitter.html
私は（両方がjQueryをベースとしていても）2つの別々のライブラリを含めていた場合、それはどのように良いコーディングプラクティスを確認していません。ここではスプリッタ
ためのポートレット とhttp://methvin.com/splitter/3csplitter.htmlためhttp://host.sonspring.com/portlets/よう は、jQueryのUIを使用してスプリッタを作成する方法についての例である：
HTML：
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
スクリプト：
$(function()
{
$(".resizable1").resizable(
{
autoHide: true,
handles: 'e',
resize: function(e, ui)
{
var parent = ui.element.parent();
var remainingSpace = parent.width() - ui.element.outerWidth(),
divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui)
{
var parent = ui.element.parent();
ui.element.css(
{
width: ui.element.width()/parent.width()*100+"%",
});
}
});
});
これは一般的なスクリプトです。私は、流体のレイアウトにほとんど変更を加えていません。
私は私の実装のベースとしてドミトリの答えを使用していました。スライダを右にドラッグしたときに、その特定の実装が境界ボックスを2倍にするのを止めることは何もないことに注意してください。
私は今、（ペインのサイズを将来変更できるようにするため）単純な移動不可能なスプリッタが必要でした。私のアプリケーションはすでにjQueryを使用していますので、コードの一部を次のように変更して実現しました。
$(function()
{
$(".resizable1").resizable(
{
autoHide: false,
containment: "#wrap",
...
私はまた、次のように表示されてからサイズ変更可能なカーソルを防ぐために、（とりわけ）CSSのカーソルのスタイルを変更：
.ui-resizable-e {
cursor: default;
...
おかげドミトリ！
私の最初の考えは：最初に、最後のもの以外のすべてのボックスを選択しました。それらは彼らの右側にスプリッターを得る。 次に、スプリッタを動かすと、スプリッタに接触している2つのボックスだけがサイズ変更されます。
これは貼り付けをコピーできる例です。それはそのまま動作します。 これは、任意の数の列に対して使用できます。あなたはまた、CSSを適応させることを確認してください。
1つのボックスを拡張するためにいくつかのボタンを追加しました。リセットボタンもあります。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI 4-Column Splitter</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
body {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
white-space: nowrap;
background-color: #c0c0c0;
}
.resizable {
width: 25%;
height: 120px;
display: inline-block;
overflow: hidden;
}
.ui-resizable-e {
cursor: e-resize;
width: 10px;
top: 0;
bottom: 0;
background-color: gray;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrap">
<div class="resizable"> HELLO </div>
<div class="resizable"> WORLD </div>
<div class="resizable"> FOO </div>
<div class="resizable"> BAR </div>
</div>
<div id="controls">
<input type="button" value="expand 0" data-index="0" class="expand">
<input type="button" value="expand 1" data-index="1" class="expand">
<input type="button" value="expand 2" data-index="2" class="expand">
<input type="button" value="expand 3" data-index="3" class="expand">
<input type="button" value="reset" class="reset">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style type="text/css" media="all">
</style>
<script type="text/javascript">
$(function() {
// settings
var minWidth = 15;
var splitterWidth = 10; // this sh ould match the css value
var splitter = $('.ui-resizable-e');
var container = $('.wrap');
var boxes = $('.resizable');
var subBoxWidth = 0;
$(".resizable:not(:last)").resizable({
autoHide: false,
handles: 'e',
minWidth: minWidth,
start: function(event, ui) {
// We will take/give width from/to the next element; leaving all other divs alone.
subBoxWidth = ui.element.width() + ui.element.next().width();
// set maximum width
ui.element.resizable({
maxWidth: subBoxWidth - splitterWidth - minWidth
});
},
resize: function(e, ui) {
var index = $('.wrap').index(ui.element);
ui.element.next().width(
subBoxWidth - ui.element.width()
);
},
});
// collapses all the other boxes to the minimum width; expands the chosen box to what ever width is left
$('.expand').click(function() {
var index = $(this).data('index');
var boxesToCollapse = boxes.length - 1;
var widthLeft = container.width() - boxesToCollapse * (minWidth + splitterWidth);
for (var i=0; i<boxes.length; i++) {
boxes.eq(i).width(i==index ? widthLeft : minWidth);
}
});
$('.reset').click(function() {
boxes.removeAttr('style');
});
});
</script>
</body>
</html>
シールドUIフレームワークのSplitter component部分は、あなたが水平方向と垂直方向のスプリッタの混合物を使用することができます。
サイズ変更可能です。あなたはそれを使用してスプリッタを実装することができます。また、[これを]チェック（http://stackoverflow.com/questions/5199368/resizable-split-screen-divs-using-jquery-ui） – Dogoku
私はhttp://methvin.com/splitter/に似たスプリッターが必要3csplitter.html – testndtv