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

TestLink1.91のバグの修正方法

どうやらTestLink1.91にはバグがあるようなので、修正方法を以下に記述。 Test

記事を読む

iPhoneアプリ開発 -UIScrollViewでタッチを取得-

* やりたいこと UIScrollViewでタッチを取得する。 * 方法 通常のUIScrollV

記事を読む

no image

CakePHP1.3でテストコード(2) -フィクスチャをいじってみる(テストデータの動的登録)-

cakePHP1.3でのSimpleTestを使ったテストケースの第2回目。 今回は、動的にテストデ

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

1

Androidアプリ開発 -9patchで吹き出し画像を作る-

* やりたいこと TextViewで文字を表示させ、背景画像に吹き出し画像を設定した場合。 文字

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(1) -最初の一歩-

* 作るアプリ 結婚式や2次会で「自分の名前を書く」芳名帳 これをアプリで作ってみます。

記事を読む

no image

iPhoneアプリ開発 -Bundle identifierを変えてはまった-

* 現象 Bundle identifierを変えた際にXcodeで実機に転送しようとすると以下のエ

記事を読む

no image

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

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

記事を読む

no image

MySQLのバックアップ手順 -消えたら困るものはバックアップ-

そろそろデータが消えてもらったら困るぐらいになっていたのでバックアップをとることにしました。 とい

記事を読む

広告

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にするといいかもしれないです。

Message

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

次の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 ↑