Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

「Backボタン」のカスタマイズ

JQM

Backボタン

ヘッダー領域に「戻る」ボタンを追加
ページのコンテナ要素に「data-add-back-btn="true"」を設定する

<body>
<div data-role="page" id="index" data-theme="c">
<div data-role="header" data-theme="b">
<h1>TOPページ</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">メニュー</li>
<li><a href="#about"><h3>このサイトについて</h3></a></li>
<li><a href="#seminar"><h3>セミナー情報</h3></a></li>
<li><a href="#access"><h3>アクセス</h3></a></li>
<li><a href="#contact"><h3>お問い合わせ</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>このサイトについて</h1>
</div>
<div data-role="content">
<h2 class="h1">このサイトについて</h2>
<p>池袋でWebデザインの勉強の記録</p>
<p>Webデザイン、PHPやJavaScriptの勉強を行っています。</p>
<h2 class="h1">フェリカテクニカルアカデミーについて</h2>
<p>建築の専門学校が母体</p>
<p>Webサイト運営も多数行っています。</p>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>セミナー情報</h1>
</div>
<div data-role="content">
セミナー情報
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="access" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>アクセス</h1>
</div>
<div data-role="content">
アクセス
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="contact" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>お問い合わせ</h1>
</div>
<div data-role="content">
お問い合わせ
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>
</body>

ヘッダー以外に戻る機能を追加

リンク要素「a」に、「data-rel="back"」を追加する

<p><a href="#index" data-rel="back">戻る</a></p>