本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.10节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当用户在页面间浏览时，有时候他会想返回到之前的页面。很明显Web浏览器为此提供了标准的回退按钮。
所以，有很好的理由在你的Web应用程序中也提供回退按钮。一个理由是当你的Web应用程序在全屏运行时，浏览器的回退按钮可能无法使用。更重要的是，jQuery Mobile应用程序模拟了原生应用程序的外观。在原生的应用程序中，回退按钮被放置在屏幕的左上角。
代码清单9-11演示了jQuery Mobile是如何使“在需要时添加回退按钮”变得非常简单的。
代码清单9-11 导航至第二张页面时带上可用的回退按钮
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Back Buttons</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 15 </head> 16 <body> 17 <div data-role="page"> 18 19 <div data-role="header"> 20 <h1>First</h1> 21 </div> 22 23 <div data-role="content"> 24 <p>Go to the <a href="#second">second page</a> to see a 25 back button</p> 26 </div> 27 28 </div> 29 <div data-role="page" data-add-back-btn="true" id="second"> 30 31 <div data-role="header"> 32 <h1>Second</h1> 33 </div> 34 35 <div data-role="content"> 36 <p>Content</p> 37 </div> 38 39 </div> 40 41 </body> 42 </html>当打开这个代码示例时，你首先发现的是没有回退按钮。这是讲得通的，因为你仍然在第一张页面上，还没有要回退的历史记录呢。这也是可以理解的，因为在第一张页面上没有定义data-add-back-button="true"属性。你可以试着在第一张页面添加这个属性，看看会发生什么。
当你浏览至第二张页面时，在左上角会出现一个回退按钮。可是第31～33行并没有包含对按钮的引用。
你也可以在锚标记上使用data-rel="back"属性，这会把页面回退至（历史记录中的）一张页面。当这么做的时候，请确保在href属性中提供了正确的链接，这样较老的浏览器和设备仍然能够去到你想它们去的页面。
