概要
jQueryMobileを使用してサイトをセットアップしました。私が抱えている問題は、内部ページ(ブログページなど)からサイトにアクセスし、ヘッダーのナビゲーションボタンをクリックすると、ホームページに戻ることができますが、ajax/hashベースのいずれも表示されないことです。ナビゲーションリンクは機能します。ヘッダーナビゲーションでは、 data-rel = "back"を使用せずに、左側のナビゲーションボタンをhrefsに直接リンクしました。私はボタンを使用してブラウザの戻るボタンを模倣しようとしているのではなく、絶対的なナビゲーションを目的としています。ChromeとFirefoxのデスクトップ、およびMobileSafariでiOS5を実行しているiPhoneでこれをテストしました。動作はすべてのブラウザで同じです。
編集:(以下の太字のイタリック体の特定の質問に注意してください。)
何が機能し、何が機能しないか
たとえば、内部ページhttp://slawson.org/blog/にアクセスし、ヘッダーのボタンをクリック< Kim
してホームページに戻ると、絶対リンク(Blogなど)にのみアクセスできますが、ハッシュベースのリンク(「ポートフォリオ」および「バージョン情報」ヘッダーの下にある他のリンク)は機能します...リンクをクリックしてもページ遷移は発生しません。代わりに、リンクが点滅して何もしません。
ホームページ( http://slawson.org/)またはホームページのサブページの1つ(http://slawson.org/#webなど)からサイトにアクセスした場合、この問題は発生しません。
index.html —ハッシュベースのナビゲーションを使用する他のほとんどのページが含まれています(これらは機能しません)。例:
- Webサイト
- iOSアプリケーション
- 出版物を印刷する
- ロゴとブランディング
- ..。
blog/index.htmlおよびblog/.../*.html— JQMのajaxローダーを介してロードされる通常のページ(これらは機能します)。
質問
内部ページからサイトにアクセスするときのJQMとajaxナビゲーションに問題がありますか、それとも何かを再構築したり、どこかにjQueryを追加したりすることで修正できますか?すべてのページを個別のhtmlファイルに分割することは避けたいと思います。
バージョン
jQuery1.8.2とjQueryMobile1.2.0を使用しています。
編集:
私はJQMマルチページテンプレートドキュメントとこれらの関連するStackOverflowの質問を見ました:
- jQueryモバイルページのナビゲーション動作
- jquerymobileのマルチページテンプレート構造の問題に直面している
- JQuery Mobile-外部ページ(SinglePage-template)から内部ページ(MultiPage-template)へのリンク
私が試したこと:
data-url
data-url
次のように、index.htmlの複数ページに追加してみました。
<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">
しかし、それは役に立ちませんでした。
data-rel = "external"
data-rel="external"
ブログページのナビゲーションボタンにある次のリンクのように、ホームページへのリンクを追加してみました。
<a href="/" data-rel="external" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>
しかし、それも役に立ちませんでした。
data-ajax = "false"
data-ajax="false"
ブログページのナビゲーションボタンにある次のリンクのように、ホームページへのリンクを追加してみました。
<a href="/" data-ajax="false" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>
これは機能します(つまり、ホームページに移動すると、すべてのマルチページが機能します)が、ホームページに移動してもトランジションは発生しません。このリンクにトランジションを追加する方法はありますか?おそらく、クラスを与えてから、jQueryを使用してそのクラスにバインドし、トランジションを起動しますか?またはもっと良い方法はありますか?(注目すべきは、ホームページへのリンクにdata-ajax = "false"を追加した後、戻るボタンは正常に機能することです。ここでのClement Hoの回答は、追加すると戻るボタンが壊れることを意味しますが、表示されません)