jQuery UI 是如何工作的？答案

【问题标题】：How jQuery UI works?jQuery UI 是如何工作的？
【发布时间】：2010-12-17 03:27:55
【问题描述】：

任何人都可以解释 jQuery UI 主题是如何工作的，而无需在计划 html 页面中将任何元素分配给 css 类。 jQuery UI 主题中的 .css 文件如何获取元素？ jQuery 脚本文件是否有助于 css 文件选取元素？

【问题讨论】：

我页面上输出的 html 有 jQuery UI 分配的类。

标签： javascript jquery css jquery-ui

【解决方案1】：

当 jquery 创建动态 html 元素时，它会将预定义的类分配给元素。

例如。选项卡容器分配了以下 css 类ui-tabs ui-widget ui-widget-content ui-corner-all，每个选项卡标题都有以下类ui-state-default ui-corner-top。

然后主题 .css 文件使用这些类根据主题为这些元素分配不同的样式。

【讨论】：

【解决方案2】：

您可以创建自己的 UI 主题...当然。但是，要获得他们所拥有的图像、渐变等效果，还需要做很多工作。

它的工作方式是，当 UI 插件启动时，例如选项卡，您会看到创建了 div、分配了类以及一些其他更改。 CSS 文件的样式根据创建的新类。如果您要自己制作，则需要寻找这些样式（使用 Firebug 寻求帮助），然后从那里开始。

【讨论】：

他们是要内联css，还是jquery UI也有一个单独的css类
好吧，为了使主题（仅 css 文件和图像）模块化（这意味着您可以插入一个而无需更改 js 代码），它必须仅依赖于类。您可能会在 firebug 中看到一些内联内容，但这是来自 UI 初始化/操作，而不是主题本身
Themeroller 让制作新主题变得非常容易：jqueryui.com/themeroller
非常真实... themeroller 让我想起了那个。如果您想制作自己的主题，请务必使用类似的服务，并避免尝试自己做

【解决方案3】：

查看来源。这是一些sn-ps的代码......

.ui-helper-hidden { display: none; }
...
.ui-widget .ui-widget { font-size: 1em; }
...
.ui-icon-carat-1-n { background-position: 0 0; }
...
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
...
.ui-menu .ui-menu {
 margin-top: -3px;
}

您将看到 jQuery css 在其所有 css 选择器中使用类。那么为什么css会引用不存在的类选择器呢？ jquery UI javascript框架动态地将类添加到html元素中，css根据类对它们进行样式化。

【讨论】：

【解决方案4】：

当你让一个元素成为 jQuery UI 元素时，你会做类似的事情

$('#myDiv').tabs();

它本质上是添加类，比如

$('#myDiv').addClass('ui-tabs');
$('#myDiv').addClass('ui-widget');

然后它会修改 DOM 并附加实现 UI 元素所需的控件，例如在选项卡的情况下，它会搜索具有选项卡标题的列表并使它们成为选项卡，然后搜索与列表元素对应的所有 div并为它们分配类等等。

样式表只使用指定的类来设置元素的样式。

并简短地回答您的问题 CSS 选择类是因为 jQuery 在实现控件时分配了类

【讨论】：