您的位置：首页 > Web前端 > JQuery

使用jquery mobile 点击超链接提示“error loading page” 解决方法

2012-02-17 13:38 501 查看
在a标签里添加

data-ajax="false"

或

rel="external"

属性

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

详解：

外部页面链接

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

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

若是ajax恳求成功，新页面内容会添加到DOM傍边，所有mobile widget都是主动初始化的，然后新页面会动画过渡显示出来.

若是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发出的恳求能解析正确的页面.

更多技巧细节请拜见导航模型Ajax， hashes and history
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航