ボックス区切り移動サンプル(StateBox使用)

DividedBoxのボックスサイズ変更やdividerの表示/非表示を行うメソッド、及び、StateBoxのサンプルです。

StateBoxは、ある要素の状態(State)を管理するためのコンポーネントです。

以下のように要素を定義します。

<div class="stateBox">
  <div data-state="middle">middle state</div>
  <div data-state="mini">mini state</div>
  <div data-state="large">large state</div>
</div>

state名をdata-stateに指定します。state名は任意です。StateBoxは現在設定されているstate要素のみを表示してその他を非表示にします。またstateを切り替えることが出来ます。

StateBoxControllerを上記のような要素にバインドして使用します。

var stateBoxController = h5.core.controller('.stateBox', h5.ui.components.DividedBox.StateBox);

デフォルトでは、一番上に定義されたstate(上記例の場合はmiddle)が設定されます。

stateの切り替えは以下のようにして行います。

stateBoxController.setState('mini');

下のサンプルは、各ボックスにStateBoxをバインドしてあります。