Javascript 如何重写ajax=false，以便在存在时切换到加载的dom页面_Javascript_Jquery_Jquery Mobile

Javascript 如何重写ajax=false，以便在存在时切换到加载的dom页面

javascript jquery jquery-mobile

Javascript 如何重写ajax=false，以便在存在时切换到加载的dom页面,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我有几个项目HTML，每个项目都包含一个JQM页面。我还有一个索引页。它是一个多JQM页面的html，每个JQM页面都作为一个类别列出项目 index.html item1.html item2.html +------------------+ +--------+--------+ +-------- |+-------+ | +--|Cat. | Next|->|C

我有几个项目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  ||
  ||       ||       ||
  |+-------++-------+|
  +------------------+

index.html item1.html item2.html
+------------------+        +--------+--------+  +--------
|+-------+|+——|猫下一只猫。
||.cont-| | |+-------------+|--------
||ent |+----+| | ||
|| link2 | | | ||
|         +-------+|        +-----------------+  +--------
|+-------++-------+|
||#第2类| |#第3类||
||       ||       ||
||链接4 | |链接3||
||       ||       ||
|+-------++-------+|
+------------------+

目前，我可以从索引链接到该项，并且可以顺利地加载ajax。然而，我意识到，如果我想从item链接回index#cat1，我需要使用

dataajax='false'

，因为index是一个多页html。（我不能使用

data rel='back'

，因为上一页并不总是index.html）

如果我使用

ajax='false'

，如果我经常在列表和项目之间切换（每次切换回列表都是完全重新加载），我将失去平稳过渡。e、 g:

-满载->索引#cat1-ajax加载->项目2-满载（再次）->索引#cat1

问题

我想：

-满载->索引#cat1-ajax加载->项目2-ajax切换到已加载->索引#cat1

我如何重写jquery移动逻辑，以便在单击

dataajax='false'

链接时，它首先进行搜索，查看该索引cat1页面是否已经在dom中？如果是，那么只需切换到JQM页面。如果不存在，则在不使用ajax的情况下完全加载索引cat1（与默认行为类似）

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

我知道我需要用一些自定义属性标记每个JQM页面，比如

data full url=“index.html#cat1”

，以便更容易搜索现有页面。然而，我的主要缺点是如何更改现有的Jquery移动链接逻辑。

我已经在下面的问题中创建了您的情况

1）索引页：
2）详细项目页面：（此页面已在索引页面FIDLE中链接）

我没有使用数据ajax='false'，它能解决您的问题吗？如果没有，请根据您的具体情况更新此小提琴，这样可以更好地帮助您。

jsfiddle似乎有问题，这与您的示例接近吗

我把它放在本地服务器上

对于item1的back按钮，您可以放置完整的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>


家
你好，家
第一类
你好cat1
“第二类
你好，第二类

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>


第1项的家
你好，项目1

如果没有，为什么不将每个伪页面分割成不同的HTML文档呢？创建这个复杂的逻辑有什么好处？如果是关于感知的加载时间，那么我建议使用单独的文档并使用

数据预取

属性来避免不必要的导航延迟。谢谢。所以我的问题是，如果我的用户从item page开始，我想允许它链接回index#cat1。我当前的版本很好，我不认为，没有Ajax就很容易实现转换。我要做的是我只保留一个页面应用程序，通过Ajax导航，并使用哈希更改来维护历史记录/刷新。因此，如果只使用Ajax加载item1和item2更容易的话。你仍然可以请求服务器加载item1和item2的内容，但它只提供正文部分，而不提供完整的HTML页面。加载了第一次索引，显然它不会是ajax加载。一个例子是：item1--full load->index#cat1--ajax load->item2--js switch->index#Cat1County让我更加努力，可能是，我已经找到了一个解决方案。但是要求您的项目页面知道类别页面的ID/键。这是更新的链接：谢谢，但它将保持重新加载索引页面，我需要一个JQM框架之外的javascript解决方案是的，这是我当前的解决方案，但我想要的是避免重新加载整个home.html，如果它以前加载过浏览器将使用其缓存，更多信息请访问简单地说，如果你使用缓存来保持ajax导航，速度会明显变慢，因为我的索引页相当大。尝试使用ajax导航是我想要解决的问题，而不是我试图避免的问题。