jquery mobile href超连接单击显示error loading page

时间 2019-11-18

标签 jquery mobile href 连接单击显示 error loading page 栏目 JQuery 繁體版

原文原文链接

在a标签里添加
javascript

data-ajax="false"html

或
java

rel="external"ajax

属性浏览器

例：<a data-ajax="false" href="http://www.***.com/help/***.zip">点击下载</a>
框架

详解：
动画

外部页面连接

JQuery Mobile 主动化了建立ajax站点和法度的过程.url

默认景象下，当你点击一个连接时会指向一个外部页面（如.products.html），然则框架会解析该连接的 href属性而后发出一个ajax恳求（Hijax）并显示正在加载的提示.spa

如果ajax恳求成功，新页面内容会添加到DOM傍边，全部mobile widget都是主动初始化的，而后新页面会动画过渡显示出来..net

如果ajax恳求失败，框架会显示一个小小的错误消息提示（""e""调板的样式），并会在一小段时候内消散，而且不会破损当前的导航流（译注:即页面不会刷新也不会对进步撤退猬缩按钮有影响）

内部页面连接

单个HTML文档能够包含多个""page""，只需要在一个页面包含多个data-role="page"的div便可，每一个pagediv必须由一个独一的ID （id="foo"），而连接到响应页面应用锚记便可（href="＃foo"）.当点击一个连接时，框架会寻找id为锚记href的内部""page""并显示到当前界面中.

要重视如果你正在经由过程ajax从一个mobile页面连接到一个含有多个内部页面的页面，你需要为该连接添加一个 rel="external" 或者 data-ajax="false" . 该属性告诉框架对页面进行从头加载，url hash也将清零.这点十分关键，由于ajax 页面应用 hash（＃）来追踪ajax汗青，当含有多个内部page的页面应用hash 来指导内部page时会产生冲突.

举例来讲，一个指向含有多个内部page的页面的连接会像如许:

<a href="multipage.html" rel="external">Multi-page link</a>

这儿有个2 ""page""页面的例子，由两个jQuery Mobile div构建，每一个div由其ID来导航，要重视这些page上的ID只需要支撑内部的页面连接，如果每一个页面是分别的HTML文档，这些ID则是可选的. 如下是两个page，在body 元素里面.

 <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>I""m first in the source order so I""m shown as the page.</p> <p>View internal page called <a href="＃bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I""m first in the source order so I""m shown as the page.</p> <p><a href="＃foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body>

查看多page模板

请重视: 由于咱们应用了hash来为全部ajax ""page"" 追踪汗青记录，现今朝来讲，在一个jQuery Mobile page里还不成能把连接做为通俗的锚记（index.html＃foo），由于框架会寻找一个 ID 为＃foo ""page"" 来跳转，而不是像通俗HTML页面那样迁移转变含有该ID的内容.

撤退猬缩连接

如果你对一个a标签应用 data-rel="back" 属性，任安在上方的点击都邑模仿撤退猬缩按钮，而忽视它的href 属性. 这点在连接回一个已定名的页面十分有效，好比当有一个到""home""连接或者当用javascript生成一个撤退猬缩按钮时，或者一个按钮用来封闭一个对话框.当在你的源代码应用这个特色的时辰，必然要供给一个有意义的href实际指出引用页面的URL （这会使得该特色也能在C级浏览器中也能起感化）. 一样，请记住如果你只是纯真应用一个撤退猬缩过渡而不在汗青记录中真正撤退猬缩，你能够应用 data-direction="reverse"来调换.

重定向和连接到目次

当连接至一个目次地址时（好比用 href="typesofcats/"来调换 href="typesofcats/index.html"），你必须供给一个后置斜杠.这是由于jQuery Mobile假定在url中最后一个"/" 后面的项目组是一个文件名，jQuery Mobile会移除该项目组，以便在未来有页面被引用时建立基地址.

然而，你能够经由过程返回已经指定了data-url属性的page div来解决该题目. jQuery Mobile会应用该属性的值来更新URL来调换畴昔恳求的那个页面. 这也允许你返回url的更改来做为重定向的成果，举例来讲，你能够提交一个表单到"/login.html"，然则成功提交后返回一个 url "/account". 该对象允许你在一些程度上把握jQuery Mobile 的汗青记录栈，如下是一些例子:

这个连接指向"docs-links-urltest/index.html"，该连接是一个目次里的索引页 : Test Link 返回的页面会用"docs/pages/docs-links-urltest/"（包含后置斜杠）来更新hash，这是经由过程那个页面的 data-url的值来完成的. 谨记这个值会调换所有hash，是否调换取决于你自己，当刷新或者深切连接时URL发出的恳求能解析正确的页面.

http://blog.csdn.net/xpsharp/article/details/7267596

jquery mobile href超连接 单击显示error loading page

外部页面连接

内部页面连接

撤退猬缩连接

重定向和连接到目次

jquery mobile href超连接单击显示error loading page