戻る

ヘッダ

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

ヘッダにボタンを付ける（１）―左側にボタンを置く

ページタイトル

ボタン1 
<div data-role="header">
	<h1>ページタイトル</h1>
	<a href="/">ボタン1</a>
</div>

ヘッダにボタンを付ける（２）―両側にボタンを付ける

ページタイトル

ボタン1 ボタン2 
<div data-role="header">
	<h1>ページタイトル</h1>
	<a href="/">ボタン1</a>
	<a href="/">ボタン2</a>
</div>

ヘッダにボタンを付ける（３）―右端にボタンを置く

ページタイトル

ボタン1 
<div data-role="header">
	<h1>ページタイトル</h1>
	<a href="/" class="ui-btn-right">ボタン1</a>
</div>

「戻る」ボタンを付ける（１）―マークアップで設定する

ページタイトル

<div data-role="page" data-add-back-btn="true">
	<div data-role="header">
		<h1>ページタイトル</h1>
	</div>
	<div data-role="content">
		<p></p>
	</div>
</div>

「戻る」ボタンを付ける（２）―スクリプトから設定する

$(document).bind("mobileinit",function(){
	$.mobile.page.prototype.options.addBackBtn = true;
});

「戻る」ボタンのテキストを変える（１）―マークアップで設定する

ページタイトル

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">
	<div data-role="header">
		<h1>ページタイトル</h1>
	</div>
	<div data-role="content">
		<p></p>
	</div>
</div>

「戻る」ボタンのテキストを変える（２）―スクリプトから設定する

$(document).bind("mobileinit",function(){
	$.mobile.page.prototype.options.addBackBtn = true;
	$.mobile.page.prototype.options.backBtnText = "戻る";
});

「戻る」ボタンのテーマを変える（１）―マークアップから設定する

ページタイトル

<div data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
	<div data-role="header">
		<h1>ページタイトル</h1>
	</div>
	<div data-role="content">
		<p></p>
	</div>
</div>

「戻る」ボタンのテーマを変える（２）―スクリプトから設定する

$(document).bind("mobileinit",function(){
	$.mobile.page.prototype.options.addBackBtn = true;
	$.mobile.page.prototype.options.backBtnTheme = "b";
});

ヘッダーにナビゲーションを付ける

ページタイトル

ホーム 
<div data-role="header">
	<h1>ページタイトル</h1>
	<a href="/" data-icon="home" data-iconpos="notext" data-direction="reverse">ホーム</a>
	<div data-role="navbar">
		<ul>
			<li><a href="a.html" class="ui-btn-active">P1</a></li>
			<li><a href="b.html">P2</a></li>
			<li><a href="c.html">P3</a></li>
			<li><a href="d.html">P4</a></li>
		</ul>
	</div>
</div>

ヘッダを画面上部に固定する

位置固定ヘッダ

  • アイテム01
  • アイテム02
  • アイテム03
    • ・ ・ ・
  • アイテム20
<div data-role="header" data-position="fixed">
	<h1>位置固定ヘッダ</h1>
</div>
<div data-role="content">
	<ul data-role="listview">
		<li>アイテム01</li>
		<li>アイテム02</li>
		<li>アイテム03</li>
			・
			・
			・
		<li>アイテム20</li>
	</ul>
</div>

ヘッダをフルスクリーンモードにする

フルスクリーンヘッダ

<div data-role="page" data-fullscreen="true">
	<div data-role="header" data-position="fixed">
		<h1>フルスクリーンヘッダ</h1>
	</div>
	<div data-role="content">
		<img src="mydog.jpg">
	</div>
</div>

固定バーのトグル機能をオフにする

$(document).bind("mobileinit",function(){
	$.mobile.fixedTogglebars.setTouchToggleEnabled(false);
});
inserted by FC2 system