jQueryMobileでiPad向けの2カラムのWebページをデザインする その６

前回まででメニューの画面遷移が実装出来たので、今度はコンテンツ部分の実装に入ります。
こちらは、ほぼメニューと同じですね。面白みが無いです。

コンテンツを読み込む

コンテンツを読み込む処理ですが、メニュー側でボタンを押された場合は戻るボタンは要らないですが、コンテンツ側でボタンを押された場合には戻るボタンが欲しいですね。
なので、２パターンありますので、そこを分岐しましょう。

• sample.js

app.loadContentBody = (function() {
	return function(title, page, backbtn) {
		var html = $(page).find('div[class=ipad-content-body]').html();
		$('#contentBody').html(html);
		$('#contentHeader h1').text(title);
		if (backbtn) {
			// 戻るボタンが必要な場合（コンテンツ側からの遷移）
			var backHash = $('#index').data('mainpage');
			var backTitle = $('#index').data('mainpagetitle');
			app.pushContentBackStack({hash: backHash, title: backTitle});
			$('#index').data('mainpage', page).data('mainpagetitle', title);
			$('#contentHeader').find('a').remove();
			$('#contentHeader').append($('<a></a>').data('icon', 'back').data('rel', 'back').attr('href', backHash).text('Back'));
		} else {
			// 戻るボタンが不要の場合（メニュー側からの遷移）
			$('#index').data('mainpage', page).data('mainpagetitle', title);
			$('#contentHeader').find('a').remove();
			// バックスタックをクリアする
			app.clearContentBackStack();
		}
		$('#index').page('destroy').page();
	};
})();

コンテンツ側からの遷移の場合は、前回とほぼ一緒で、パラメータが違うくらいの差です。
しかし、メニュー側からの遷移の場合は、画面から戻るボタンを削除し、新たに追加しないのと同時に、バックスタックを初期化して、忘れてもらうことになります。
この辺りはケースバイケースですので、引数で切り替えましょう。
あとは必要に応じて呼び出して貰えれば良いかと思います。

そんなこんなで、ある程度出来ましたので、あとは細かいところを改善していきたいですね。