jQuery Mobile 主题
jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:
| 值 | 描述 | 实例 |
|---|---|---|
| a | 默认。黑色背景白色文字 | 尝试一下 |
| b | 蓝色背景白色文字/ 黑色文字灰色背景 | 尝试一下 |
| c | 黑色文字浅灰色背景 | 尝试一下 |
| d | 黑色为主白色背景 | 尝试一下 |
| e | 黑色文字橙色背景 | 尝试一下 |
| 你喜欢混合主题！ 默认情况下， jQuery Mobile 使用 "a" 主题 (黑色) 来设置头部和底部 ， "c" 主题 (浅灰色) 设置页面内容。 但是，你可以自定义设置你喜欢的混合主题。 |
主题头部，内容和底部
实例
尝试一下 »
主题对话框
实例
Go To The Themed Dialog Page
尝试一下 »
主题按钮
实例
Button
Button
Button
尝试一下 »
主题图标
实例
Plus
尝试一下 »
头部和底部的主题按钮
实例
Home
Welcome To My Homepage
Search
Button 1
Button 2
Button 3
尝试一下 »
主题导航条
实例
Insert Footer Text Here
Button 1
Button 2
Button 3
Button 4
尝试一下 »
主题可折叠按钮和内容
实例
Click me - I'm collapsible!
I'm the expanded content.
尝试一下 »
主题列表
实例
List Item
List Item
List Item
List Item
尝试一下 »
主题分割按钮
实例
尝试一下 »
主题可折叠列表
实例
Agnes
尝试一下 »
主题表单
实例
Full Name:
Choose Favorite Color:
Red Green Blue
尝试一下 »
主题可折叠表单
实例
Click me - I'm collapsible!
尝试一下 »
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名(f-z),并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式 - 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content:
实例
尝试一下 »
本文转载自：w3cschool
| （编辑：雷林鹏 来源：网络 侵删) |