《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.16 技巧：使用主题来更改配色方案...
本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.16节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.16 技巧：使用主题来更改配色方案
一旦定义好了自己的配色方案（color scheme），可以在HTML中通过设置主题来使用它。而且就算没有定义“自定义配色方案”，仍可以使用默认的配色方案，如代码清单9-18所示。
代码清单9-18 在单张页面中使用多个主题
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Themes 1</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" data-theme="b">
21 <h1>Themes 1</h1>
22
23 <a href="#first" data-icon="arrow-l">First</a>
24 <a href="#second" data-icon="arrow-r" data-theme="a">Second</a>
25
26 </div>
27 <div data-role="content">
28 <p>Content</p>
29 <a href="#third" data-role="button" data-icon="arrow-u"
30 data-theme="c">Third</a>
31 <a href="#third" data-role="button" data-icon="delete"
32 data-theme="d">Fourth</a>
33 <a href="#third" data-role="button" data-icon="arrow-d"
34 data-theme="e">Fifth</a>
35 </div>
36
37 <div data-role="footer" data-position="fixed" data-theme="c">
38 <div data-role="controlgroup" data-type="horizontal">
39 <a href="#" data-role="button" data-theme="a">First</a>
40 <a href="#" data-role="button" data-theme="b">Second</a>
41 <a href="#" data-role="button" data-theme="c">Third</a>
42 <a href="#" data-role="button" data-theme="d">Fourth</a>
43 <a href="#" data-role="button" data-theme="e">Fifth</a>
44 </div>
45 </div>
46 </div>
47
48
49 </body>
50 </html>
第20行更改了header的主题。然而，在header中的按钮（第24行）却拥有不同的主题。类似地，content拥有的是默认主题，第29～34行中的所有按钮的主题都不一样。甚至组合在一起的按钮也可以有不同的主题，如第39～43行所示。
你也可以为整张页面选择一个主题，而不用在很多不同的元素上进行主题设置。代码清单9-19演示了如何更改主题。
代码清单9-19 更改整张页面的主题
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Themes 2</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" data-theme="a">
19
20 <div data-role="header" >
21 <h1>Themes 2</h1>
22 </div>
23
24 <div data-role="content">
25 <h1>Heading</h1>
26 <p>Themes can also <a href="#">set the theme</a> for regular
27 content.</p>
28 <ul>
29 <li>Test</li>
30 </ul>
31 </div>
32
33 </div>
34
35
36 </body>
37 </html>
第18行设置了整张页面的主题。请看一下屏幕上的显示结果，你会发现甚至是content的背景也渲染成了深色，上面的字是浅色的。