6

いくつかのアイテムhtmlがあり、それぞれに1つのJQMページが含まれています。インデックスページもあります。これはマルチJQMページのhtmlであり、各JQMページがアイテムをリストするカテゴリとして含まれています。

  index.html                  item1.html           item2.html
  +------------------+        +--------+--------+  +--------
  |+-------+         |     +--|Cat.    |    Next|->|Cat.
  ||.cont- |         |     |  +--------+--------+  |--------
  ||ent    |+-------+|<----+  |                 |  |
  |+-------+|#cat1  ||        |                 |  |
  |         |       ||        |bla bla bla      |  |bla bla
  |         |link1+---------->|                 |  |
  |         |link2  ||        |                 |  |
  |         +-------+|        +-----------------+  +--------
  |+-------++-------+|
  ||#cat2  ||#cat3  ||
  ||       ||       ||
  ||link4  ||link3  ||
  ||       ||       ||
  |+-------++-------+|
  +------------------+

現在、スムーズなajaxの読み込みで、インデックスからアイテムにリンクできます。ただし、アイテムからindex＃cat1にリンクし直したい場合data-ajax='false'は、インデックスが複数ページのhtmlであるため、使用する必要があることに気付きました。（data-rel='back'前のページが常にindex.htmlであるとは限らないため、使用できません）。

を使用する場合ajax='false'、リストとアイテムを頻繁に切り替えるとスムーズな移行が失われます（リストに戻るたびに完全にリロードされます）。例えば：

-full-load-> index＃cat1 -ajax-load-> item2 -full-load（again）-> index＃cat1

質問

が欲しいです：

-full-load-> index＃cat1 -ajax-load-> item2 -ajax-switch-to-already-loaded-> index＃cat1

data-ajax='false'リンクがクリックされたときに、そのindex＃cat1ページがすでにdomにあるかどうかを最初に検索するように、jqueryモバイルロジックをオーバーライドするにはどうすればよいですか？そうである場合は、そのJQMページに切り替えてください。存在しない場合は、ajaxを使用せずにindex＃cat1をフルロードします（デフォルトの動作のように）。

ユーザーはitem1.htmlから開始して、index.html＃cat1に移動できることに注意してください。

data-full-url="index.html#cat1"既存のページを簡単に検索できるようにするなど、各JQMページをいくつかのカスタム属性でマークアップする必要があることはわかっています。ただし、私の主な弱点は、既存のJqueryMobileリンクロジックを変更する方法です。

4

2 に答える 2

0

私は次のフィドルであなたの状況を作成しました。

1）インデックスページ： http： //jsfiddle.net/nachiket/RpZW7/
2）詳細アイテムページ：http：//jsfiddle.net/nachiket/cHmhW/ （これはすでにインデックスページフィドルにリンクされています）

私はdata-ajax='false'を使用していません、それはあなたの問題を解決しますか？そうでない場合は、このフィドルを正確な状況に更新してください。

于 2012-06-27T05:40:05.957 に答える
0

jsfiddle がダウンしているようですが、これはあなたの例に近いですか?

私はそれをローカルサーバーに入れました

item1 の戻るボタンには、完全な url: を配置できます。http://localhost/home.html#cat1これも機能します

home.html:

<!doctype html>
<html manifest="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link type="text/css">

</link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>

<div data-role="page" id="home">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>home</h3>
    </div>
    <div data-role="content">
        hello home
        <a href="home.html#cat1" type="button">cat1</a>
        <a href="home.html#cat2" type="button">cat2</a>
    </div>
</div>

<div data-role="page" id="cat1">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>cat1</h3>
    </div>
    <div data-role="content">
        hello cat1
        <a href="#home" type="button">home</a>
        <a href="item1.html" type="button">see item1</a>
    </div>
</div>

<div data-role="page" id="cat2">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>"cat2</h3>
    </div>
    <div data-role="content">
        hello cat2
        <a href="#home" type="button">home</a>
    </div>
</div>

    </body>
</html>​​​​​​​​​​​​

item1.html

    <!doctype html>
<html manifest="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link type="text/css">

</link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>

<div data-role="page" id="item1Home">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>item1's home</h3>
    </div>
    <div data-role="content">
        hello item1
        <a href="home.html#cat1" type="button" rel="external">back?</a>
    </div>
</div>


    </body>
</html>​​​​​​​​​​​​
于 2012-06-29T11:16:27.637 に答える