《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 

15 /head 

16 body 

18 div data-role="page" 

20 div data-role="header" data-theme="b" 

21 h1 Themes 1 /h1 

23 a href="#first" data-icon="arrow-l" First /a 

24 a href="#second" data-icon="arrow-r" data-theme="a" Second /a 

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 

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 

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 

15 /head 

16 body 

18 div data-role="page" data-theme="a" 

20 div data-role="header" 

21 h1 Themes 2 /h1 

22 /div 

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 

33 /div 

36 /body 

37 /html 

第18行设置了整张页面的主题。请看一下屏幕上的显示结果，你会发现甚至是content的背景也渲染成了深色，上面的字是浅色的。

15款优秀的jQuery-Mobile插件 移动互联网迅速发展，PC端的网页并不能完全适应移动端页面需求，响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架，继承了jQuery的“write less,do more”精髓，具有良好的扩展性和可定制性，全面兼容各种平台设备，对于不支持的手机类型，也会降级到基础样式。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。