ボックス区切り移動サンプル

DividedBoxの使用方法についてはこちらを参照してください

---

横積みDividedBox

横積み(区切り方向は縦)のDividedBoxです。

refreshボタンをクリックするとDividedBoxController.refresh()を実行します。

サイズ変更でDividedBoxのルート要素のサイズを変更できます。

refreshを実行するとDividedBoxのルート要素に合わせてボックスの領域が再計算されます。

縦積みDividedBox

縦積み(区切り方向は横)のDividedBoxです。

ルート要素にverticalクラスを指定すると縦積みのDividedBoxになります。

DividedBoxの入れ子

横積みのDividedBoxの中に縦積みのDividedBoxを入れ子で使用した例です。

refreshボタンをクリックすると各DividedBoxについてrefreshを実行しています。

min-size/max-size指定

data属性としてmin-size、max-sizeを指定すると、そのボックスの最小サイズ、最大サイズを指定できます。

noFill指定

中央のボックスにnoFillクラスを指定しています。

ボックス要素は自動で高さ(縦積みDividedBoxの場合は幅)が100%になり、ルート要素と同じ高さ(縦積みの場合は幅)になります。

しかし、noFillクラスの指定されたボックスは元のサイズを維持します。

freezeSize指定

ルート要素にfreezeSizeクラスを指定すると、DividedBoxのルートのサイズは生成時のサイズに固定されます。

ルート要素の幅はauto指定をしています。そのためウィンドウ幅を変更した場合にルート要素の幅も変わります。

しかし、freezeSizeを指定するとルート要素はDividedBox適用時のサイズに固定されます。

keepSize指定

DividedBox適用時のボックスのサイズは自動で計算されます。例えば3つのボックスがあれば各ボックスのサイズはルートの1/3の大きさになります。

ただし、ボックス要素にkeepSizeクラスを指定すると、そのボックスのサイズは自動計算されずDividedBox適用前のサイズを保ちます。

この指定はDividedBox適用時にのみ意味のある指定です。適用後は通常のボックスと同じでdivider操作によるサイズ変更が可能になります。

fixedSize指定

DividedBox適用時に、ボックス要素にfixedSizeクラスを指定すると、そのボックスのサイズは変更できなくなります。

また、以下のようにして動的にボックスを固定にすることもできます

dividedBoxController.fixSize(box); // box = ボックス要素またはボックスのインデックス

サイズ固定を解除するにはunfixSize()を呼びます。

dividedBoxController.unfixSize(box); // box = ボックス要素またはボックスのインデックス

refresh時にサイズの自動計算が行われますが、固定サイズボックスはrefreshされてもサイズ変更されません。

ボックスの動的追加と削除

DividedBoxのルート要素にdiv要素を追加してrefresh()を呼ぶと、自動で追加した要素がボックスとして扱われます。

divを追加ボタンを押すと最後尾にdiv要素を追加します。

refresh()を呼ぶと、追加されたdivをボックスとして扱えます。

insert()とremove()

DividedBoxにボックスを動的に追加・削除することができます。

追加する箇所は、追加したボックスが何番目のボックスになるか、既存のボックス要素を指定します。既存のボックス要素を指定した場合はそのボックスの前に追加されます。

省略した場合は最後尾に追加します。

削除する箇所は、削除するボックス要素または削除するボックスが何番目のボックスかを指定します。

dividedBox.insert(indexOrTargetBox, box);

dividedBox.remove(indexOrTargetBox); 

ボックス除外要素

DividedBoxをバインドすると、基本的にはバインド要素内の要素全てがボックスとして扱われます。

しかし、position:absoluteを指定している要素はボックスの対象になりません。

固定位置に表示する要素を置いたり、インジケータを出すことができます。

dividedBox.insert(indexOrTargetBox, box);

dividedBox.remove(indexOrTargetBox);