《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.6 技巧:不使用AJAX而链接至外部页面...

    xiaoxiao2024-04-21  9

    本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.6节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

    9.6 技巧:不使用AJAX而链接至外部页面

    默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。代码清单9-7演示了多种在链接上禁用AJAX加载行为的方法。

    代码清单9-7 指示不通过AJAX加载而提供外部页面的链接

    00 <!DOCTYPE html> 01 <html> 02 <head> 03  <title>Linking Without AJAX</title> 04  <meta name="viewport" 05    content="width=device-width, initial-scale=1"> 06  <link rel="stylesheet" href= 07    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08  <script type="text/javascript" 09    src="http://code.jquery.com/jquery-1.7.1.min.js"> 10  </script> 11  <script type="text/javascript" src= 12    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13  </script>  14 </head> 15 <body> 16 17 <div data-role="page"> 18 19  <div data-role="header"> 20   <h1>Linking Without AJAX</h1> 21  </div> 22 23  <div data-role="content">  24   <p><a href="04b-link.html" data-ajax="false">Link to an 25    external file</a></p>   26   <!-- OR: 27   <p><a href="04b-link.html" rel="external">Link to an 28    external file</a></p> 29   -->    30  </div> 31  32 </div> 33 34 </body> 35 </html>

    在第24行,data-ajax属性用来指定是否使用AJAX。默认值是true。如果设置为false,将会禁用AJAX。

    第27行提供了rel="external"属性。在jQuery Mobile中行为是一样的:禁用AJAX。这个标记的依据是HTML的建议标准。然而,使用这个标记会有一些副作用。有些人可能会指定一些CSS规则,给指向外部地址的链接赋予不同的外观。例如,可能会在这些链接上添加一个小图标1。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)