《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.11 技巧:在页面下方添加footer

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

9.11 技巧:在页面下方添加footer

在到目前为止的示例中,你已经见过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鼠标放上后链接平滑移动效果-WordPress插件


下一篇:h5拨打电话