boxSizeChange

トラック操作やメソッド呼び出しなどでボックスのサイズが変更された場合、そのボックス要素からboxSizeChangeイベントが上がります。

ボックスのサイズ変更時に何かしたい場合はこのboxSizeChangeイベントハンドラを記述するのがよいでしょう。

dividerTrackstart/dividerTrackmove/dividerTrackend

dividerをマウス(またはタッチ)でトラック操作を行ったときに以下のイベントが上がります。

dividerTrackstart

dividerトラック操作開始時に上がるイベント

dividerTrackmove

dividerトラック操作中、dividerが移動した時に上がるイベント

dividerTrackend

dividerトラック操作終了時に上がるイベント

いずれのイベントもイベント引数には以下のようなオブジェクトが渡されます。

{
prev: トラック操作によってサイズが変更される、dividerの前にあるボックス要素,
next: トラック操作によってサイズが変更される、dividerの後ろにあるボックス要素,,
$divider: トラック操作によって動くdivider要素全て。fixedSize指定のボックスがある場合に複数のdividerが同時に動く。
move: dividerTrackmoveイベントの場合のみ。移動したピクセル数
}

fixedSize指定などで同時に動くdividerがある場合でも、トラック操作中のdivider要素からのみイベントが上がります。

同時に動いているdivider要素全てを取得したい場合はイベント引数の$dividerから取得してください。

サンプル

応用サンプル

トラック操作完了時のサイズ変更検知

ボックスのサイズが変更された時に行いたい処理があって、その処理が重い場合、トラック操作中はその処理は行わずトラック終了時にその処理を行うのがよいでしょう。

以下はそのような状況を想定したサンプルです。

ボックスサイズ変更時にそのボックスに現在のボックスのサイズを表示するようにしています。

トラック操作中は該当のボックスに半透明にするスタイルを当てています。

コントローラ実装例

var controller = {
	__name: 'sample.controller.Sample2Controller',
	// DividedBoxを子コントローラとしてバインド
	verticalDBController: h5.ui.components.DividedBox.DividedBox,
	horizontalDBController: h5.ui.components.DividedBox.DividedBox,
	eventLogController: sample.controller.EventLogController,
	__meta: {
		verticalDBController: {
			rootElement: '.dividedBox.vertical'
		},
		horizontalDBController: {
			rootElement: '.dividedBox.horizontal'
		}
	},
	/**
	 * トラック中かどうかのフラグ
	 */
	_isTracking: false,

	'{rootElement} boxSizeChange': function(ctx) {
		// トラック操作中なら何もしない
		if (this._isTracking) {
			return;
		}
		this._showSize(ctx.event.target);
	},

	'{rootElement} dividerTrackstart': function(ctx) {
		// トラック中のフラグを建てる
		this._isTracking = true;
		// 両サイドのボックスを半透明にする
		$(ctx.evArg.prev).addClass('translucent');
		$(ctx.evArg.next).addClass('translucent');
	},

	'{rootElement} dividerTrackend': function(ctx) {
		this._isTracking = false;
		// 半透明解除
		this.$find('.translucent').removeClass('translucent');
		this._showSize(ctx.evArg.prev);
		this._showSize(ctx.evArg.next);
	},

	_showSize: function(box) {
		var $box = $(box);
		if ($box.hasClass('dividedBox')) {
			// 入れ子にしているボックスは中のボックスについてサイズを表示
			$box.find('.box').each(this.ownWithOrg(function(innerBox) {
				this._showSize(innerBox);
			}));
			return;
		}
		var size = $box.width() + '×' + $box.height();
		$box.find('.size').text(size);
	}
};