6. 主题 Theme

[b][size=medium]主题样式综述 Theming overview[/size][/b]

Jquery Mobile中每一个布局和组件都被设计为一个全新的面向对象的css框架，使我们能够给站点和应用程序适用完全统一的视觉设计主题。Jquery Mobile的主题样式系统与Jquery UI的ThemeRoller 系统很类似，但是做出了几点重要的改进.
--------------------------------------------------------------------------------
他使用的css3来显示圆角，文字和盒阴影和颜色渐变，而不是图片，使得主题文件非常轻量级，减轻了服务器的负担
--------------------------------------------------------------------------------
主体框架包含了几套颜色色板。每一套都包含了可以自由混搭和匹配的头部栏，body，按钮状态。用来构建视觉纹理，创建丰富的设计
--------------------------------------------------------------------------------
开放的主题框架允许你创建最多6套主题样式，给设计增加近乎无限的多样性
--------------------------------------------------------------------------------
一套简化的图标集，包含了移动设备上大部分需要使用的图标，并且sprite到一张图片里减少了图片大小


[b][size=medium]主题与色板 Themes & swatches[/size][/b]

主题系统的关键在于把针对颜色与材质的规则，和针对布局结构的规则（例如padding和尺寸）的定义相分离。这使得主体的颜色和材质在样式表中只需要定义一次，就可以在站点中混合，匹配以及结合，得到广泛的使用?
--------------------------------------------------------------------------------
每一套主题样式包括几项全局设置，包括字体阴影，按钮和盒模型的圆角值。另外，主题也包括几套颜色色板，每一个都定义了工具栏，内容区块，按钮和列表项的颜色以及字体的阴影
--------------------------------------------------------------------------------
Jquery Mobile默认内建了5套主题样式，用（a,b,c,d,e）引用。为了使我们的颜色主题能够保持一直地映射到我们的组件中，我们遵从的规约是：a主题是视觉上最高级别的主题（黑色），b主题为次级用主题（蓝色），c主题为基准主题，在很多情况下是默认使用的，主题d为备用的次级内容用主题，主题e为强调用主题。你也可以手动添加主题用于强调，或者是特殊的场合。例如：你可以手动添加新的主题“i",用于制作红色的工具栏或者按钮，用于错误提示
--------------------------------------------------------------------------------
全新的ThemeRoller工具会在2011年 Jquery Mobile 1.0 release 版本时发布。在这之前，也很容易手动编辑默认的基准样式而且/或者编辑css文件增加主题：拷贝主题样式那一段css，将它用新的字母重命名，然后更换颜色


[b][size=medium]Bars[/size][/b]
默认的主题包含了一下的5种bar的样
[img]http://dl.iteye.com/upload/attachment/591970/80c630fd-5e50-3e19-ade6-1de80f5f0325.jpg[/img]
默认情况下，Jquery Mobile给所有的头部栏和尾部栏分配的是a主题，因为他们在应用中是视觉优先级最高的。如果要给bar设置一个不同的主题，只需要给头部栏和尾部栏容器增加 data-theme 属性，然后设定一个主题样式字母即可，例如b,d等? 更多参见工具栏主题样式


[b][size=medium]内容 Content Blocks[/size][/b]
默认主题也包含了用于内容的颜色样式，使得在设计上与头部栏的颜色相匹配
[img]http://dl.iteye.com/upload/attachment/591972/0017810e-fbc8-3cae-841c-d4075d1b8214.jpg[/img]
如果没有特别指定的话，Jquery Mobile会默认给content分配主题c，使得在视觉上与头部栏区分开来
[img]http://dl.iteye.com/upload/attachment/591974/558ad130-0b06-34d5-b4b1-af2ee7d96b23.jpg[/img]


[b][size=medium]列表和按钮 Lists & Buttons[/size][/b]
每一套主题也包含了针对交互元素，比如说列表项和按钮的默认样式
[img]http://dl.iteye.com/upload/attachment/591976/66b1e43b-1995-31b3-a4c2-625270ffde8f.jpg[/img]
默认情况下，所有放置在一个bar里的按钮都会被自动分配一个和它所在的bar或者box的主题样式所匹配的主题，用以 在视觉上形成一个整体，像变色龙。
[img]http://dl.iteye.com/upload/attachment/591979/2ec08395-c123-372f-aaec-d3f0c5a4fe3b.jpg[/img]
这样的默认行为可以使你很容易地通过设置父容器的主题样式改变整个页面的主题，因为你知道按钮在不同主题的视觉配重都是一样的。而因为表单元素用按钮的样式，他们也会适配他们的父容器
如果你要给按钮在视觉上进行强调，来帮助他从工具栏中凸现出来，可以给链接增加data-theme="a"属性。给按钮在标记中设置了不同的主题后，父容器主题更改时框架不会覆盖其颜色，因为你决定了要设置它
[img]http://dl.iteye.com/upload/attachment/591981/23eb5ac3-7b3b-3bd4-a123-129e1073d760.jpg[/img]


[b][size=medium]全局“活动”状态 Global "Active" state[/size][/b]
Jquery Mobile框架用一个单独的主题叫做"active"(蓝色)，用来总是指示被选中的状态，无视该组件的主题. 我们给导航与表单元素应用了这样的"活动"主题，不管是否有指示被选中的状态的需要。因为这一个主题样式是设计用来给用户清晰的，一致的反馈的，所以不能通过标记来覆盖，在主题中该项只要设置一次，，Jquery Mobile会在不管被选中或者活动状态需要时都应用他。该样式在样式表中的ui-btn-active规则来设置
“活动”状态用来给可切换的元素标记“on”状态
[img]http://dl.iteye.com/upload/attachment/591983/0845949d-47f4-395a-8987-b1953dc7ac14.jpg[/img]

[b][size=medium]图标 Icons[/size][/b]
Jquery Mobile包含了一套标准的图标，可以分配给按钮。为了尽量减小核心图标的文件大小，Jquery Mobile只包含了图标白色的图案，然后在图标背后自动添加了半透明的黑色圆形背景，使得图标在所有背景色下都可以看的明晰