雷林鹏分享：jQuery Mobile 主题

　　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

（编辑：雷林鹏 来源：网络 侵删)