本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.11节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在到目前为止的示例中，你已经见过header和content的div了。同样地，你也可以定义footer的div。当使用footer时，你需要考虑两件事情：footer在屏幕上的位置是什么，以及在footer里面显示什么内容？代码清单9-12在页面的下方添加了一个包含几个按钮的footer。
代码清单9-12 在页面下方显示包含按钮的footer
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Footer</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 18 <div data-role="page"> 19 20 <div data-role="header"> 21 <h1>Footer</h1> 22 </div> 23 24 <div data-role="content"> 25 <p>Content</p> 26 </div> 27 28 <div data-role="footer"> 29 <h1>Footer</h1> 30 <a href="#">Button?</a> 31 <a href="#" data-role="button" data-icon="delete"> 32 Remove 33 </a> 34 <a href="#" data-role="button" data-icon="plus"> 35 Add 36 </a> 37 </div> 38 </div> 39 40 41 </body> 42 </html>第一个按钮是在第30行构建的。添加一个简单的链接就足以创建一个新的按钮。在footer中的链接默认会被转换成按钮。第31～36行用常见的方式添加了两个按钮，每个按钮都带一个自定义图标。
这个示例中的content的div几乎是空的。你可以添加更多的内容，看看当向上和向下滚动时footer的位置会发生什么变化。footer将会在你添加的内容之下并且停留在页面的下方。
你也可创建按钮组，而不是单独的按钮。默认情况下，按钮组中的按钮是垂直排列的，添加data-type="horizontal"，可以在单个水平矩形框中显示按钮，最右边和最左边的按钮显示为圆角。代码清单9-13演示了结果。
代码清单9-13 在footer中显示一组按钮
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Footer Button Set</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 18 <div data-role="page"> 19 20 <div data-role="header"> 21 <h1>Footer Button Set</h1> 22 </div> 23 24 <div data-role="content"> 25 <p>Content</p> 26 </div> 27 28 29 <div data-role="footer"> 30 <div data-role="controlgroup" data-type="horizontal"> 31 <a href="#" data-role="button">First</a> 32 <a href="#" data-role="button">Second</a> 33 <a href="#" data-role="button">Third</a> 34 <a href="#" data-role="button">Fourth</a> 35 </div> 36 </div> 37 38 </div> 39 40 41 </body> 42 </html>第30～35行在单独的按钮的外围加了一个带有data-role="controlgroup"和data-type="horizontal"属性的div。
相关资源：jQuery.ui.1.7.2中文文档