第17章-使用jQuery-Mobile主题

17.1了解jQueryMobile主题在jQueryMobile中，由于每一个页面中的布局和组件都被设计成一个全新的面向对象的CSS框架，整个站点或应用的视觉风格可以通过这个框架得到统一。统一后的视觉设计主题称为jQueryMobile主题样式系统，，它主要有以下几个特点。

轻量级的文件轻量级的图标灵活的主题便捷的自定义主题

17.2

jQueryMobile页面主题在jQueryMobile中，组件和页面布局的主题定义是通过使用一套完整的CSS样式来实现的，在这套CSS样式中包括两个重要组成部分，结构和主题。默认主题根据jQueryMobile版本的不同，jQueryMobile所提供的默认页面主题也有所不同，目前提供的最新的版本中提供了两套主题样式，分别使用字母a和b进行引用。而在版本中提供了5套主题样式，分别使用字母a、b、c、d和e进行引用。除了可以使用系统提供的主题样式外，开发者还可以很方便地修改系统主题中的各类属性值，并快捷地自定义属于自己的主题。在默认情况下，jQueryMobile中头部栏与尾部栏的主题是a字母，因为a字母代表最高的视觉效果。如果需要改变某组件或容器当前的主题，只需要将它的data-theme属性值设置成主题对应的样式字母即可。修改默认主题虽然jQueryMobile中提供了系统自带的主题，但大部分开发人员还是希望可以根据应用的需求，修改相应的主题结构和色调。实现的方法也很简单，只要打开定义主题的CSS样式表文件，找到需要修改的元素，调整对于的属性值，然后保存文件即可。实战练习——修改默认头部栏和尾部栏效果

除了可以使用系统提供的主题样式外，开发者还可以很方便地修改系统主题中的各类属性值，并快捷地自定义属于自己的主题。在默认情况下，jQueryMobile中头部栏与尾部栏的主题是a字母，因为a字母代表最高的视觉效果。如果需要改变某组件或容器当前的主题，只需要将它的data-theme属性值设置成主题对应的样式字母即可。实战练习——jQueryMobile页面默认主题最终文件：光盘\最终文件\第17章\17-2-1.html视频：光盘\视频\第17章\17-2-1.swf最终文件：光盘\最终文件\第17章\17-2-2.html视频：光盘\视频\第17章\17-2-2.swf

17.3自定义jQueryMobile页面和工具栏主题前面介绍了如何修改系统自带的主题，实现的方法十分简单。但由于是对源CSS样式文件进行的修改，每次当版本更新后，都需要对新版本的文件重新覆盖修改后的代码，操作不是很方便。为此，可以重新编写一个单独的CSS文件，专门用户定义页面与组件的主题样式。该文件与系统文件同时并存，实现用户自定义主题的功能。自定义页面主题页面主题由包含了整个页面的样式化了的HTML元素构成。jQueryMobile推荐的页面结构由一个<div>组成，该元素包含了一个值为page的data-role属性。如果要样式化这一元素，在其之上应用一个data-theme属性，并为其指定一个唯一的且是未用过的主题值，这样就可以为该页面写一个自定义的CSS。实战练习——自定义页面主题最终文件：光盘\最终文件\第17章\17-3-1.html视频：光盘\视频\第17章\17-3-1.swf自定义工具栏主题在jQueryMobile中，工具栏所包含的头部栏与尾部栏默认的主题是a，也可以直接在工具栏容器标签中添加data-theme属性来指定其所需要使用的主题。如果需要自定义工具栏主题样式，则可以创建.ui-bar-(a-z)类CSS样式，再通过data-theme属性来调整所定义的主题样式即可。实战练习——自定义工具栏主题自定义内容主题与页面主题相比而言，内容主题所影响的范围小一些。内容主题所针对的范围仅局限于页面的content容器中，该容器之外的元素不受影响。此外，在内容区域content容器中，还可以通过data-content-theme属性设置可折叠区块中显示区域的主题，而这一主题是独立的、自定义的，不受限于内容区域content容器的主题。实战练习——自定义可折叠区块主题

最终文件：光盘\最终文件\第17章\17-3-2.html视频：光盘\视频\第17章\17-3-2.swf最终文件：光盘\最终文件\第17章\17-3-3.html视频：光盘\视频\第17章\17-3-3.swf

17.4使用ThemeRoller创建主题ThemeRoller是jQueryMobile提供了一款非常实用的主题创建工具。访问ThemeRoller官方网站。实战练习——应用ThemeRoller生成的主题最终文件：光盘\最终文件\第17章\17-4.html视频：光盘\视频\第17章\17-4.swf

17.5本章小结本章主要介绍了有关jQueryMobile主题的相关内容。介绍了jQueryMobile的默认主题，以及对默认主题进行修改和自定义的方法。并且还介绍了使用jQueryMob