jQuery 移动哈希导航从内部页面进入站点时在多页模板中不起作用



概述

我已经使用jQuery Mobile设置了一个站点。我遇到的问题是,当我从内部页面(例如博客页面)输入网站并单击标题中的导航按钮时,我可以返回到主页,但没有一个基于AJAX/HASH导航链接工作。在我的标题导航中,我使用data-rel =" back"将左侧导航按钮与hrefs链接到。我不是要使用按钮来模仿浏览器的后退按钮,而是为了绝对导航。我已经在Chrome和Firefox的桌面上以及在移动Safari中运行iOS 5的iPhone进行了测试;在所有浏览器中的行为都是相同的。

edit :(请注意以下在 BOLD ITALIC 中的特定问题。)

什么有效,什么无效

例如,如果您转到内部页面http://slawson.org/blog/,然后单击标题中的< Kim按钮返回主页,然后您只能转到"绝对链接"(例如博客(例如,Blog))但是,没有一个基于哈希的链接(" portfolio"one_answers" oi tho tho tho throw headers"下的其他链接工作...单击链接不会发射页面过渡,而是链接只是眨眼而什么都不做。

如果您从主页&mdash输入网站;http://slawson.org/&mdash;或主页的子页面之一&mdash;就像http://slawson.org/#web&mdash;这个问题没有发生。

  • index.html&mdash;包含大多数使用基于哈希的导航的其他页面(这些不起作用),例如:

    • 网站
    • iOS应用程序
    • 打印出版物
    • 徽标&amp;品牌
    • ...

  • blog/index.html和博客/.../*。html&mdash;通过JQM的AJAX加载程序加载的常规页面(这些工作)。

问题

从内部页面输入站点时,JQM和Ajax导航是否存在问题,或者这可以通过重组或在某处添加某些JQuery来解决的问题? 我想避免将每个页面分解为单独的HTML文件。

版本

我正在使用jQuery 1.8.2和jQuery Mobile 1.2.0。


编辑:

我查看了JQM多页模板文档,并查看了这些相关的Stackoverflow问题:

  • jQuery移动页面导航行为
  • 在Jquerymobile的多页模板座椅中面临问题
  • jQuery移动 - 从外部页面(单页板)到内部页面(乘法 - 板)

我尝试过的事情:

data-url

我尝试将 data-url添加到index.html中的多页面,就像:

<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">

但这无济于事。

data-rel ="外部"

我尝试将data-rel="external"添加到主页上的链接,例如博客页面上的"导航"按钮上的此链接:

<a href="/" data-rel="external" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>     

但这也没有帮助。

data-ajax =" false"

我尝试将data-ajax="false"添加到主页上的链接,例如博客页面上的"导航"按钮上的此链接:

<a href="/" data-ajax="false" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>       

这有效(即,您可以转到主页,然后所有的多页面工作),但是过渡不会发射到主页。是否有一种方法可以通过给该链接添加过渡,也许是通过给它一个类,然后使用一些jQuery绑定到该类别以发射过渡?更好的方法?(请注意,在我将data-ajax =" false"添加到主页的链接之后,返回按钮正常工作。克莱门特·ho(Clement Ho)的答案在这里意味着添加它会打破后面的按钮,但我没有看到)

问题是,当您单击"链接到它们"时,基于哈希的页面不存在。(<div data-rolw="page" id="#web">...</div>不存在)

如果您设置了后端框架,则只要提出非AJAX(初始)请求,就可以返回基于哈希的页面以及请求的页面。然后,这些页面无论先加载哪个页面都将在DOM中。

就像您说的那样,另一种选择是将每个页面分解为自己的文件。

相关内容

  • 没有找到相关文章

最新更新