読者です 読者をやめる 読者になる 読者になる

別HTMLの戻るボタン表示について

jQuery Mobileで特徴的なのが、1つのHTMLに別ページの要素が
埋め込むことが可能であるということです。
上記のことを先輩社員に話したところ
「やっぱり、別のHTMLにしたほうがいいんじゃない?」
という話を聞いたので、別ページにしたところ問題が発生。

  1. ページ遷移にスライドがなくなった。
  2. 遷移先のページに「戻る」ボタンがなくなった。


とりえあえず、2番目だけ解決したのでメモ。


まず、遷移元となるherfには、以下のように記述します。

<a href="./about.html">
    <h3>About</h3>
</a>


そして、遷移先のヘッダー要素に対して以下のように記述します。

<div data-role="header" data-theme="b">
    <a href="javascript:history.back();" data-icon="arrow-l">戻る</a>
    <h1>About</h1>
</div>


Before

After


まず「data-icon="arrow-l"」は、左矢印ボタンとなります。
表示位置は、ヘッダの直下にある最初のリンクを探して自動的に
左端に配置されるようなので「class="ui-btn-left"」は
特に記載しなくても大丈夫なようです。


しかし、相変わらずページ遷移のスライドが出ません。
案件によって「スライドがほしい!」なんてことが
あるかもしれないので、別ファイルでもスライドできるように
しておかないといけないと思う次第です。


引き続き調査です。