---

jQuery UI API 类别 - 主题（Theming）

概述

主题（Theming）是 jQuery UI 的一个重要特性，因为它允许用户基于自己的需求对应用界面进行定制。jQuery UI 提供了多个主题，也允许用户自定义主题。本文将介绍 jQuery UI API 类别 - 主题（Theming）的相关内容。

选项

theme

• 类型：string
• 默认值："base"

主题名称。jQuery UI 提供了多个主题，其中默认主题为 "base"。本选项会影响整个应用程序的样式。

disabled

• 类型：boolean
• 默认值：false

设置为 true 时，应用程序的主题将被禁用。禁用后，应用程序的样式将使用浏览器默认样式。

CSS 类

ui-widget

• 描述：所有 jQuery UI 组件的容器元素应该添加 ui-widget 类。这个类为应用程序提供了基础的样式。
• 示例：<div class="ui-widget">...</div>

ui-widget-content

• 描述：jQuery UI 的大多数组件都需要一个用于呈现内容的容器，这个容器应该添加 ui-widget-content 类。这个类提供了组件内容的默认样式。
• 示例：<div class="ui-widget-content">...</div>

ui-state-default

• 描述：该类用于指定默认状态下组件的表现样式。
• 示例：<button class="ui-state-default">...</button>

ui-state-hover

• 描述：该类用于指定组件在鼠标悬停状态下的样式。
• 示例：.ui-state-hover { background: #555555; }

ui-state-active

• 描述：该类用于指定组件在被激活时的表现样式（如当用户按下一个按钮时）。激活状态通常只是在按下的瞬间产生，而不是持久的状态。
• 示例：.ui-state-active { background: #666666; }

ui-state-focus

• 描述：用于指定一个组件在得到焦点时的样式。通常在键盘上导航时会用到。
• 示例：.ui-state-focus { outline: none; }

ui-widget-header

• 描述：用于指定容器元素中的头部区域的样式。大多数组件都有一个头部区域，用于显示标题或工具栏等。
• 示例：<div class="ui-widget-header">Header Text</div>

ui-widget-header

• 描述：用于指定容器元素的脚部区域的样式。不是所有的组件都包含脚部，在某些情况下可能需要这个类来创建脚部样式。
• 示例：<div class="ui-widget-footer">Footer Text</div>

自定义主题

要创建自定义主题，用户可以使用 jQuery UI 的主题历程（ThemeRoller）。自定义主题有两种方式，一种是基于已有的主题进行自定义，一种是从头开始创建全新的主题。通过主题历程，用户可以轻松地修改组件的所有样式，包括背景色、字体、圆角等。主题历程还提供了多个主题颜色方案，用户只需选择适合自己应用程序的方案即可。

总结

主题是 jQuery UI 组件库的一个重要特性，它允许用户基于自己的需求对应用界面进行定制。jQuery UI 提供了多个主题，也允许用户自定义主题。本文介绍了关于 jQuery UI API 类别 - 主题（Theming）的相关内容，包括选项、CSS 类和自定义主题。了解这些内容可以帮助用户更好地利用 jQuery UI 提供的主题特性，为应用程序创建独一无二的外观和体验。