概述
我已经使用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中。
就像您说的那样,另一种选择是将每个页面分解为自己的文件。