jQuery UI 应用不同Theme的办法
字体：[ ] 类型：转载 时间：
jQuery UI是一套非常好用的jQuery Tools库，目前已经发布的最新版本是1.8.4。在我自己的使用过程中，总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的，使用起来很难和具体的网页风格去配合。
　　一开始，我准备去动手，自己修改CSS文件。这被证明是个非常费力不讨好的事情。
　　有一次在jQuery UI的主页【】停留的时候，一个单词很快吸引了我的注意：【themeable】，这不就是“可变主题的”的意思吗？于是我进入到【】这里，发现了下图的这个地方，他们官网的人把主题的更换叫做“主题滚轮”（哈哈哈，翻译水平一般，信达雅也不知道满足了多少）。
　　第一个TAB页里说的是【滚出我们自己的主题样式】。打开下面各个分项后，可以自己定义自己需要的样式，定义好以后，点那个下载的按钮就可以下载自己定义好的一套主题样式了。这比自己动手去改CSS文件什么的方便多了。
　　第二个TAB页打开后，就发现原来他们已经准备好了很多的主题。这对于我这样的懒人很合适，这么多的样式总有一个是我想要的。
　　选中自己喜欢的样式，点击下载按钮，会自动转到下载页面，然后就能把自己想要的主题样式包给下载下来了。也可以在下载页面的【Theme】区的下拉框里选择自己需要的主题，我选择的是【Cupertino】。
　　两个压缩包下载下来（注意：不同的主题样式，压缩包名称是一样的，保存时别覆盖了），解压以后就发现，不同的主题其实只有CSS文件夹中的内容不同，也就是主题包的资源不同（主题包资源包括图片和CSS文件）。其它的都是一样的，文件夹文件名都一样，甚至于文件里面的元素的命名都是一样的。
　　在应用的项目工程中，只需要将主题包和【jquery-ui-1.8.4.custom.min.js】文件加入工程，就可以使用可变主题的jQuery UI了。如图：
&　　我们所要做的就是在需要使用jQuery UI的页面中添加对于CSS文件和JS文件的引用即可。我一般是在母版页里添加。 代码如下: &link rel="stylesheet" type="text/css" href="http://www.jb51.net/Content/smoothness/jquery-ui-1.8.4.custom.css" /& &script type="text/javascript" src="/Scripts/jquery-ui-1.8.4.custom.min.js"&&/script&
当我们要更换jQuery UI的主题样式时，只需要修改对CSS的引用路径即可实现。如下图，这个颜色的部分就是修改的地方。
代码如下: &link rel="stylesheet" type="text/css" href="http://www.jb51.net/Content/cupertino/jquery-ui-1.8.4.custom.css" /&
这里【】是jQuery UI的一些使用示例的介绍，这个地址已经直接进入到TAB控件的使用说明。使用说明的页面布局如下图：
　　左边：选择你要显示的对象；
　　中间：是运行时的实际效果显示的地方，点击【View Source】能显示源代码；
　　右边：是选中对象的一些扩展功能的示例，选择不同的功能，显示区即会有随之变化，源代码区也会跟着变更；例如：上图选择【Open on mouseover】，Tab控件的Tab Page则由原来需要点击才能切换变成了只需要鼠标移动上去就可以切换了。
　　最后，再次强烈推荐jQuery UI。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery UI 教程
jQuery UI API - CSS 框架（CSS Framework）
下面是 jQuery UI 使用的 Class 名称列表。这些 Class 用来创建跨应用程序的视觉一致性，且允许组件通过
进行主题化。下面的 CSS 类根据样式是否是固定的结构化的，或者是否是可主题化的（颜色、字体、背景等），分别定义在 ui.core.css 和 ui.theme.css 两个文件中。
.ui-helper-hidden：对元素应用 display: none。
.ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。
.ui-helper-reset：UI 元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：对父元素应用浮动包装属性。
.ui-helper-zfix：对 &iframe& 元素应用 iframe &fix& CSS。
.ui-front：应用 z-index 来管理屏幕上多个小部件的堆叠，如需了解更多详情，请查看
小部件容器
.ui-widget：对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和 1em 的字体尺寸，以应对 Windows 浏览器中的继承问题。
.ui-widget-header：对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content：对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）
.ui-state-default：对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable default& 容器样式。
.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable hover& 容器样式。
.ui-state-focus：当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable hover& 容器样式。
.ui-state-active：当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable active& 容器样式。
交互提示 Cues
.ui-state-highlight：对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &highlight& 容器样式。
.ui-state-error：对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &error& 容器样式。
.ui-state-error-text：对只有无背景的错误文本颜色应用的 Class。可用于表单标签，也可以对子图标应用错误图标颜色。
.ui-state-disabled：对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
.ui-priority-primary：对第一优先权的按钮应用的 Class。应用粗体文本。
.ui-priority-secondary：对第二优先权的按钮应用的 Class。应用正常粗细的文本，对元素应用轻微的透明度。
状态和图像
.ui-icon：对图标元素应用的基本 Class。设置尺寸为 16px 方块，隐藏内部文本，对 &content& 状态的精灵图像设置背景图像。注意： .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
在声明 .ui-icon class 之后，接着您可以声明一个秒速图标类型的 class。通常情况下，图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示：
.ui-icon-triangle-1-e
jQuery UI 的
在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。
其他视觉效果
圆角半径助手
.ui-corner-tl：对元素的左上角应用圆角半径。
.ui-corner-tr：对元素的右上角应用圆角半径。
.ui-corner-bl：对元素的左下角应用圆角半径。
.ui-corner-br：对元素的右下角应用圆角半径。
.ui-corner-top：对元素上边的左右角应用圆角半径。
.ui-corner-bottom：对元素下边的左右角应用圆角半径。
.ui-corner-right：对元素右边的上下角应用圆角半径。
.ui-corner-left：对元素左边的上下角应用圆角半径。
.ui-corner-all：对元素的所有四个角应用圆角半径。
覆盖 & 阴影
.ui-widget-overlay：对覆盖屏幕应用 100% 宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow：对覆盖应用的 Class，设置了不透明度、上偏移/左偏移，以及阴影的 &厚度&。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。
记住登录状态
重复输入密码jQuery UI 教程
jQuery UI CSS 框架 API
jQuery UI CSS 框架
jQuery UI 包含了一个强大的 CSS 框架，为了创建自定义 jQuery 小部件而设计的。框架包含了通用的用户界面所需的类，且可使用 jQuery UI ThemeRoller 进行维护。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件。您需采用共享标记公约，以便在插件社区的代码集成。
下面的 CSS 类根据样式是否是固定的结构化的，或者是否是可主题化的（颜色、字体、背景等），分别定义在 ui.core.css 和 ui.theme.css 两个文件中。这些类被设计来用于用户界面元素，以便获得整个应用程序的视觉一致性，可通过 jQuery UI ThemeRoller 对组件进行主题化。
.ui-helper-hidden：对元素应用 display: none。
.ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。
.ui-helper-reset：UI 元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：对父元素应用浮动包装属性。
.ui-helper-zfix：对 &iframe& 元素应用 iframe &fix& CSS。
小部件容器
.ui-widget：对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和 1em 的字体尺寸，以应对 Windows 浏览器中的继承问题。
.ui-widget-header：对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content：对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）
.ui-state-default：对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable default& 容器样式。
.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable hover& 容器样式。
.ui-state-focus：当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable hover& 容器样式。
.ui-state-active：当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 &clickable active& 容器样式。
交互提示 Cues
.ui-state-highlight：对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &highlight& 容器样式。
.ui-state-error：对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 &error& 容器样式。
.ui-state-error-text：对只有无背景的错误文本颜色应用的 Class。可用于表单标签，也可以对子图标应用错误图标颜色。
.ui-state-disabled：对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
.ui-priority-primary：对第一优先权的按钮应用的 Class。应用粗体文本。
.ui-priority-secondary：对第二优先权的按钮应用的 Class。应用正常粗细的文本，对元素应用轻微的透明度。
状态和图像
.ui-icon：对图标元素应用的基本 Class。设置尺寸为 16px 方块，隐藏内部文本，对 &content& 状态的精灵图像设置背景图像。注意： .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
在声明 .ui-icon class 之后，接着您可以声明一个秒速图标类型的 class。通常情况下，图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示：
.ui-icon-triangle-1-e
jQuery UI 的
在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。
其他视觉效果
圆角半径助手
.ui-corner-tl：对元素的左上角应用圆角半径。
.ui-corner-tr：对元素的右上角应用圆角半径。
.ui-corner-bl：对元素的左下角应用圆角半径。
.ui-corner-br：对元素的右下角应用圆角半径。
.ui-corner-top：对元素上边的左右角应用圆角半径。
.ui-corner-bottom：对元素下边的左右角应用圆角半径。
.ui-corner-right：对元素右边的上下角应用圆角半径。
.ui-corner-left：对元素左边的上下角应用圆角半径。
.ui-corner-all：对元素的所有四个角应用圆角半径。
覆盖 & 阴影
.ui-widget-overlay：对覆盖屏幕应用 100% 宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow：对覆盖应用的 Class，设置了不透明度、上偏移/左偏移，以及阴影的 &厚度&。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。
记住登录状态
重复输入密码Bootstrap 教程
Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于&a&, &button&, 或 &input& 元素上：
为按钮添加基本样式
.btn-default
默认/标准按钮
.btn-primary
原始按钮样式（未被操作）
.btn-success
表示成功的动作
该样式可用于要弹出信息的按钮
.btn-warning
表示需要谨慎操作的按钮
.btn-danger
表示一个危险动作的按钮操作
让按钮看起来像个链接 (仍然保留按钮行为)
制作一个大按钮
制作一个小按钮
制作一个超小按钮
.btn-block
块级按钮(拉伸至父元素100%的宽度)
按钮被点击
下面的实例演示了上面所有的按钮 class：
&button type=&button& class=&btn btn-default&&默认按钮&/button&
&button type=&button& class=&btn btn-primary&&原始按钮&/button&
&button type=&button& class=&btn btn-success&&成功按钮&/button&
&button type=&button& class=&btn btn-info&&信息按钮&/button&
&button type=&button& class=&btn btn-warning&&警告按钮&/button&
&button type=&button& class=&btn btn-danger&&危险按钮&/button&
&button type=&button& class=&btn btn-link&&链接按钮&/button&
结果如下所示：
下表列出了获得各种大小按钮的 class：
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按钮，会横跨父元素的全部宽度。
下面的实例演示了上面所有的按钮 class：
&button type=&button& class=&btn btn-primary btn-lg&&大的原始按钮&/button&
&button type=&button& class=&btn btn-default btn-lg&&大的按钮&/button&
&button type=&button& class=&btn btn-primary&&默认大小的原始按钮&/button&
&button type=&button& class=&btn btn-default&&默认大小的按钮&/button&
&button type=&button& class=&btn btn-primary btn-sm&&小的原始按钮&/button&
&button type=&button& class=&btn btn-default btn-sm&&小的按钮&/button&
&button type=&button& class=&btn btn-primary btn-xs&&特别小的原始按钮&/button&
&button type=&button& class=&btn btn-default btn-xs&&特别小的按钮&/button&
&button type=&button& class=&btn btn-primary btn-lg btn-block&&块级的原始按钮&/button&
&button type=&button& class=&btn btn-default btn-lg btn-block&&块级的按钮&/button&
结果如下所示：
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
下表列出了让按钮元素和锚元素呈激活状态的 class：
按钮元素添加 .active class 来显示它是激活的。
锚元素添加
.active class 到 &a& 按钮来显示它是激活的。
下面的实例演示了这点：
&button type=&button& class=&btn btn-default btn-lg &&默认按钮&/button&
&button type=&button& class=&btn btn-default btn-lg active&&激活按钮&/button&
&button type=&button& class=&btn btn-primary btn-lg &&原始按钮&/button&
&button type=&button& class=&btn btn-primary btn-lg active&&激活的原始按钮&/button&
结果如下所示：
当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class：
按钮元素添加 disabled 属性 到 &button& 按钮。
锚元素添加 disabled class 到 &a& 按钮。
下面的实例演示了这点：
&button type=&button& class=&btn btn-default btn-lg&&默认按钮&/button&
&button type=&button& class=&btn btn-default btn-lg& disabled=&disabled&&禁用按钮&/button&
&button type=&button& class=&btn btn-primary btn-lg &&原始按钮&/button&
&button type=&button& class=&btn btn-primary btn-lg& disabled=&disabled&&禁用的原始按钮&/button&
&a href=&#& class=&btn btn-default btn-lg& role=&button&&链接&/a&
&a href=&#& class=&btn btn-default btn-lg disabled& role=&button&&禁用链接&/a&
&a href=&#& class=&btn btn-primary btn-lg& role=&button&&原始链接&/a&
&a href=&#& class=&btn btn-primary btn-lg disabled& role=&button&&禁用的原始链接&/a&
结果如下所示：
您可以在 &a&、&button& 或 &input& 元素上使用按钮 class。但是建议您在 &button& 元素上使用按钮 class，避免跨浏览器的不一致性问题。
下面的实例演示了这点：
&a class=&btn btn-default& href=&#& role=&button&&链接&/a&
&button class=&btn btn-default& type=&submit&&按钮&/button&
&input class=&btn btn-default& type=&button& value=&输入&&
&input class=&btn btn-default& type=&submit& value=&提交&&
结果如下所示：
记住登录状态
重复输入密码