6

我有几个项目 html，每个项目都包含一个 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 加载从索引链接到项目。但是我意识到，如果我想从 item 链接回 index#cat1，我需要使用data-ajax='false'index 是一个多页 html。（我不能使用data-rel='back'，因为上一页并不总是 index.html）。

如果我使用ajax='false'，如果我经常在列表和项目之间切换（每次切换回列表都是完全重新加载），我将失去平滑过渡。例如：

-full-load-> index#cat1 -ajax-load-> item2 -full-load(再次)-> index#cat1

问题

我想：

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

如何覆盖 jquery 移动逻辑，以便在data-ajax='false'单击链接时首先搜索该 index#cat1 页面是否已经在 dom 中？如果是，那么只需切换到该 JQM 页面。如果它不存在，请在没有 ajax 的情况下完全加载 index#cat1（如默认行为）。

请记住，用户可以从 item1.html 开始并导航到 index.html#cat1。

我知道我需要用一些自定义属性来标记每个 JQM 页面，比如data-full-url="index.html#cat1"让搜索现有页面变得更容易。但是我的主要弱点是如何更改现有的 Jquery Mobile 链接逻辑。

4

2 回答 2

0

jsfiddle似乎失败了，这接近你的例子吗？

我把它放在本地服务器

对于 item1 的后退按钮，您可以输入完整的 url: http://localhost/home.html#cat1，它也可以使用

主页.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 回答
0

我在以下小提琴中创造了你的情况。

1）索引页面： http: //jsfiddle.net/nachiket/RpZW7/
2）详细项目页面：http: //jsfiddle.net/nachiket/cHmhW/ （这个已经链接在索引页面小提琴中）

我没用过data-ajax='false'，能解决你的问题吗？如果没有，请根据您的具体情况更新此小提琴，以便更好地提供帮助。

于 2012-06-27T05:40:05.957 回答