スクリーン サンプル

横並び　スクリーンの高さが固定

横並び　スクリーンの高さが固定でない(中身によって可変)

縦並び

ソースコード例

HTML

<div class="screen-wrapper">
	<div class="screen-nav">
		<a class="prevpage">◀</a>
		<a class="nextpage">▶</a>
		<a class="screentrack"></a>
	</div>
	<div class="screen">
		<div data-sample-url="page1.html">ページ1(未ロード)</div>
		<div data-sample-url="page2.html">ページ2(未ロード)</div>
		<div data-sample-url="page3.html">ページ3(未ロード)</div>
	</div>
</div>

ナビゲーションコントローラの実装

		(function() {
	var navigationController = {
		/**
		 * @memberOf app.controller.NavigationController
		 */
		__name: 'app.controller.NavigationController',

		/**
		 * スクリーンのコンテンツURLリスト
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_urlList: [],

		/**
		 * 現在スクリーンに表示中のコンテンツURLのインデックス
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_urlIndex: 0,

		/**
		 * トラック操作開始からの移動量
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_totalSlideAmount: 0,

		/**
		 * トラック操作中かどうか
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_isTracking: false,

		/**
		 * スクリーン要素
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_$screen: null,

		/**
		 * 縦スクロールのナビゲーションかどうか
		 *
		 * @memberOf app.controller.NavigationController
		 */
		_isVertical: false,

		/**
		 * 初期設定
		 *
		 * @memberOf app.controller.NavigationController
		 */
		__ready: function(context) {
			this._$screen = context.args.$screen;
			this._$trackArea = this.$find('.screentrack');
			var urlList = this._urlList;
			// urlListにDOMに記述されているURLを保存する。
			// urlが記述されていない箇所についてはundefinedになるので、ロードはされなくなる。
			this._$screen.find('.h5screenContent').each(function(index) {
				urlList.push($(this).data('sample-url'));
			});
			// URLリストの最初のページをロード
			if (this._urlList[this._urlIndex]) {
				this.trigger('loadPage', {
					url: this._urlList[this._urlIndex]
				});
			}
			//
			this._isVertical = context.args.isVertical;
		},

		/**
		 * 前へボタンクリック
		 *
		 * @memberOf app.controller.NavigationController
		 * @param context
		 */
		'.prevpage click': function(context) {
			context.event.preventDefault();
			// 前(左)のページへスライドして、指定したURLをロード
			this._urlIndex = this._urlIndex === 0 ? this._urlList.length - 1 : --this._urlIndex;
			this.trigger('prevPage', {
				url: this._urlList[this._urlIndex]
			});
		},

		/**
		 * 次へボタンクリック
		 *
		 * @memberOf app.controller.NavigationController
		 * @param context
		 */
		'.nextpage click': function(context) {
			context.event.preventDefault();
			// 前(左)のページへスライドして、指定したURLをロード
			this._urlIndex = this._urlIndex === this._urlList.length - 1 ? 0 : ++this._urlIndex;
			this.trigger('nextPage', {
				url: this._urlList[this._urlIndex]
			});
		},

		/**
		 * トラック
		 *
		 * @param context
		 * @memberOf app.controller.NavigationController
		 */
		'.screentrack h5trackstart': function(context) {
			// スクリーンがアニメーション動作中ならキャンセル
			if ($('.screen').hasClass('inOperation')) {
				return;
			}
			this._isTracking = true;
			var isVertical = this._isVertical;
			this.trigger('screenTrackstart', {
				trackSize: this.$find('.screentrack')[isVertical ? 'height' : 'width']()
			});
			this._totalSlideAmount = 0;
		},

		/**
		 * トラック
		 *
		 * @param context
		 * @memberOf app.controller.NavigationController
		 */
		'.screentrack h5trackmove': function(context) {
			if (!this._isTracking) {
				return;
			}
			var dist = context.event[this._isVertical ? 'dy' : 'dx'];
			this._totalSlideAmount += dist;
			this.trigger('screenTrackmove', {
				dist: dist
			});
		},

		/**
		 * トラック
		 *
		 * @param context
		 * @memberOf app.controller.NavigationController
		 */
		'.screentrack h5trackend': function(context) {
			if (!this._isTracking) {
				return;
			}
			this._isTracking = false;
			// 移動先を判定
			if (this._totalSlideAmount > 100) {
				page = 'prev';
				this._urlIndex = this._urlIndex === 0 ? this._urlList.length - 1 : --this._urlIndex;
			} else if (this._totalSlideAmount < -100) {
				page = 'next';
				this._urlIndex = this._urlIndex === this._urlList.length - 1 ? 0 : ++this._urlIndex;
			} else {
				page = 'current';
			}

			this.trigger('screenTrackend', {
				page: page,
				url: this._urlList[this._urlIndex]
			});
		}
	};
	h5.core.expose(navigationController);
})();

コントローラのバインド

h5.core.controller('.screen-wrapper', h5.ui.components.screen.ScreenUIController, {
	navigationController: app.controller.NavigationController,
	navigationRootElement: '.screen-nav'
});