jQM note：links behaviour 链接行为

来源：互联网发布：javascript权威指南编辑：程序博客网时间：2024/04/29 19:09

· 链接行为：外部链接（external links），内部链接（internal links）。这里的分类不一定准确。

· 外部链接：

jqm默认页面外部链接是通过ajax完成的。链接有<input type="button" />和<a>展现。如果要指定不适用ajax，则可使用以下三个属性来完成：

<a href="http://yourdomain.com/index.html" rel="external">Home</a><a href="http://yourdomain.com/index.html" data-ajax="false">Home</a><a href="http://yourdomain.com/index.html" target="_self">Home</a>

· 外部链接 > 返回（back）：

这里的返回，是在data-rel="dialog"属性下打开的页面中的行为；例如a.html,

<!DOCTYPE html><html><head><title>a.html</title><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="js/jquery.mobile-1.0.1.min.css" /><script src="js/jquery-1.6.4.min.js"></script><script src="js/jquery.mobile-1.0.1.min.js"></script></head><body> <div data-role="page" id="foo" data-title="a.html"><div data-role="header"><h1>Header</h1></div><div data-role="content"><a href="b.html" data-rel="dialog" data-transition="pop">dialog</a></div><div data-role="footer"><h4>Footer</h4></div></div><</body></html>

以上代码中，anchor里的属性 data-rel="dialog"制定了该链接的页面行为是用弹框的形式打开页面b.html。其中，data-transition="pop"是指弹框过渡效果。

b.html

<!DOCTYPE html><html><head><title>一个JQM页面的结构</title><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="js/jquery.mobile-1.0.1.min.css" /><script src="js/jquery-1.6.4.min.js"></script><script src="js/jquery.mobile-1.0.1.min.js"></script></head><body> <div data-role="page" id="foo" data-title="一个JQM页面的结构" data-theme="b"><div data-role="header" data-theme="b">    <a data-rel="back" href="#">返回</a>    <h1>这里是头部</h1></div><div data-role="content" style="height:400px" data-theme="b">    这里放置页面正文</div><div data-role="footer" data-theme="b">     <h4>这里是底部</h4></div></div></body></html>

以上代码中，

<a data-rel="back" href="#">返回</a>

说明了是根据浏览器track 到的history来返回的。如果你只是想要一个返回过渡效果而不是根据history-hash来回溯历史，则使用data-direction="reverse"来替代。记住，在使用data-rel时，anchor中的属性href="#"不是必须，但是推荐使用。不为啥，规范。

除此，还有mail（发送邮件）、phone（拨打电话）等。

· 外部链接 > 路径或者重定向：

在使用indexs.*的时候，需要在indexs.*前加上/ ，因为jqm是根据/的结构来判断url的，如果没有，就会认为比如 http://a.b.com/c/a[/index.html]，其中a 是文件名。

关于重定向，需要在链接中加入data-url 属性，jqm会在页面载入的时候，读取其值并更新history hash中值，从事显示为你想要重定向的链接。但是这样在重新发起请求即request和重新载入reload的时候会失效。

· 内部链接：

在jqm的dom结构上，可以在一个html中书写多个div，用以 data-role="page"来达到同一html文件多页面的效果。其中，每个div使用id来区分。如：

<!DOCTYPE html><html><head><title>Dog</title><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="js/jquery.mobile-1.0.1.min.css" /><script src="js/jquery-1.6.4.min.js"></script><script src="js/jquery.mobile-1.0.1.min.js"></script></head><body> <div data-role="page" id="first_div_page" data-title="first_div_page"><div data-role="header"><h1>first_div_page</h1></div><div data-role="content"><p>1</p><a href="#second_div_page">Go to second_div_page</a></div><div data-role="footer"><h4>Page Footer</h4></div></div><div data-role="page" id="second_div_page" data-title="second_div_page"><div data-role="header"><h1>second_div_page</h1></div><div data-role="content"><p>2</p><p><a href="#first_div_page">Back to first_div_page</a></p><p><a href="#third_div_page">Go to third_div_page</a></p></div><div data-role="footer"><h4>Page Footer</h4></div></div><div data-role="page" id="third_div_page" data-title="third_div_page"><div data-role="header"><h1>third_div_page</h1></div><div data-role="content"><p>3</p><p><a href="#second_div_page">Back to second_div_page</a></p></div><div data-role="footer"><h4>Page Footer</h4></div></div></body></html>

这是在一个页面内部，如若是从一个独立页面的html通过外部链接到了一个多页面的html，那么这个独立页面的链接就需要加上rel="external" 或者 data-ajax="false"，而且，这是必须的。原因是，添加这两个属性后，jqm会以完全刷新的方式加载多页面html，这个过程，会从新增加一个记录多页面history的hash而清除原来的ajax history hash，规避了冲突。

ok。