jQuery Mobileの初期設定 -jQuery Mobieを利用時にページ内リンクさせたい-

公開日: : IT, jQueryMobile


 前提

jQuery Mobileを利用していて、以下のタグを使ってページ内遷移したいことがありました。
しかし、jQuery Mobileを利用しているときは、以下のタグを使ってページ内遷移はできません。

<a href="#sample">飛ぶ</a>
//略
<a name="sample">サンプル</a>

 

jQuery Mobileを利用している場合、以下のように1ページ内にタグを使って飛ばすことは出来ます。
しかし、これはあくまでも別ページが表示される形でありページ内遷移ではありません。
※複数ページテンプレート

<div data-role="page">
<a href="#sample">飛ぶ</a>
</div>
<div data-role="page" id="sample">
サンプル
</div>

 解決策

「複数ページテンプレート」を使わない場合のみ、以下の設定をすることで対応することが出来ます。

   $.mobile.hashListeningEnabled = false;

 

以下のような形で、初期設定として読みこませればOKです。

$(document).bind("mobileinit", function(){
   $.mobile.hashListeningEnabled = false;
});

※この設定をfalseにしてしまうと「複数ページテンプレート」ができなくなってしまう点に注意です。

 参考

グローバル設定 | jQuery Mobile 1.1.0 日本語リファレンス

広告

関連記事

no image

ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

no image

Capistranoで簡単デプロイ -開発用サーバー編-

cakePHPを使って開発しているサービス()で、リリース周りを楽にしたいなと思いCapistran

記事を読む

no image

jQueryMobileでデバイスの向きを変えた際に画像サイズも変更 -orientationchange を使ってみた-

端末が縦・横に変化した際に画像サイズを変えたいことがあったのでちょろっとjQueryMobileでや

記事を読む

no image

CakePHP1.3でテストコード(3) -ENUM型が使えない-

cakePHP1.3でのSimpleTestを使ったテストケースの第3回目。 今回は、テーブル構成で

記事を読む

no image

ヘルプ作成で思ったWebサービスの3つの心得 -短文の教え-

最近ヘルプを作って思った3つのこと。 * 1文に複数の内容を書かない 1文に複数の内容を書いてい

記事を読む

WordPressプラグイン「WP Hatena Notation」にPullRequestを投げた話

WordPressではてな記法が利用できる「WP Hatena Notation」を重宝しています。

記事を読む

Jenkins + iPhoneアプリ(番外1) -TestFlightを利用する-

* これまで - -- 執事(Jenkins)を雇いました。 * やりたいこと Jenk

記事を読む

no image

iPhoneアプリ開発 −遷移先のViewControllerに値を引き継ぎたい−

例えば、トップページに複数個のボタンがあって、「A」と「B」というボタンを押下した際に、同じView

記事を読む

no image

Objective-cで悩んでいたこと −アクセサのことについて−

* 疑問 以前書いたiPhoneアプリを開発していて(Objective-Cを触っていて)疑問に思

記事を読む

no image

iPhoneアプリ開発 -同じ画像を2度以上画像処理した際に起こるエラーの対処-

* 起きた現象 (1) UIImageのデータを元にピクセルの値を色々といじって画像処理。 (2)

記事を読む

広告

Comment

  1. こじま より:

    上記スクリプトを設置したのですが、やはりページ内リンクができない状態です。
    スクリプトの設置場所はhtml上なのが問題なのでしょうか?

  2. とし より:

    どのように書いたかわかりませんが、htmlファイルに以下のように書いてもダメでしたか?

    &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).bind(&quot;mobileinit&quot;, function(){
       $.mobile.hashListeningEnabled = false;
    });
    &lt;/script&gt;
    
  3. koo より:

    こじまさんと同じ状況におかれているものです。
    としさんのアドバイスどおりhtmlファイルに上記のものを記述させていただきましたが、一向にリンクが出来ない問題が解決できませんん。(内部リンクのみとばない。)
    無知で申し訳ないのですが、他に何か解決策はありませんでしょうか?

  4. とし より:

    気がつくのが遅くなって申し訳ないです。
    他に、linkBindingEnabledをfalseにするといいかもしれないです。

こじま へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑