重用来自 jquery-ui 框架类的 css 属性？

Posted 2023-03-07

【中文标题】重用来自 jquery-ui 框架类的 css 属性？

【英文标题】：Reuse css properties from jquery-ui framework classes?

【发布时间】：2012-08-24 10:52:21

【问题描述】：

jQueryUI 提供方便的 css 框架：http://jqueryui.com/docs/Theming/API

只需使用 jQueryUI 的 CSS 类（ui-widget-content、ui-widget-header 等），您就可以通过http://jqueryui.com/ThemeRoller轻松创建可主题化的 html-sn-ps

我在设计我的应用程序时有时会缺少的一个功能是重用 jquery-UI 的 CSS 类中的 css 属性，但不是所有属性。使用none !important 可以进行简单的重用。

例如，当您只想获得没有背景或边框的.ui-widget-content 的前景color 时，您可以这样做：

<style>
.no-background  background: none !important; 
.no-border  border: none !important; 
</style>
<div class="ui-widget-content no-background no-border">
  hi world :)
</div>

但是，有没有一种简单的方法来获取.ui-widget-header 的background-color 并将其作为color 在我自己的CSS 类中重用？

我为此做了一个快速而肮脏的解决方案：使用 javascript 和 DOM 操作填充样式标签。

JSBin：http://jsbin.com/ijuxar/7/edit

HTML 代码：

<style class="computedStyles"></style>
<div class="cssHelper ui-helper-hidden-accessible" style="visibility: hidden">
  <div class="ui-widget-header"></div>
  <div class="ui-widget-content"></div>
  <div class="ui-state-default"></div>
  <div class="ui-widget-header ui-state-active"></div>
  <div class="ui-widget-header ui-state-hover"></div>
</div>
<h1 class="ui-color-2">Hi World</h1>

JS代码：

$(document).ready(function () 
  var css= '', i, colors = [
      $('.cssHelper .ui-widget-content').css('color'),
      $('.cssHelper .ui-widget-header').css('background-color'),
      $('.cssHelper .ui-state-hover').css('background-color'),
      $('.cssHelper .ui-state-default').css('background-color'),
      $('.cssHelper .ui-widget-header.ui-state-active').css('background-color')
  ];
  for (i = 0; i < colors.length; i += 1) 
      css += '.ui-color-' + (i + 1) + '  color: ' + colors[i] + '\n';
  
  $('style.computedStyles:first').text(css);
);

我觉得 JavaScript 解决方案有些邪恶。此外，它会在某些浏览器中导致FOUC。

是否可以使用纯 CSS 和/或服务器端工具 (SASS/LESS/...) 来完成它？

【参考方案1】：

CSS 代表层叠样式表。这意味着由类设置的样式将“级联”

因此，如果您有自己的 css 文件，并将其包含在 jquery css 之后。它将超越 jquery css。同样，如果您将 2 个类附加到一个 html 元素，则第 2 个类样式将覆盖第一个类。

另一种重写 CSS 类的特定样式的方法是在你的 CSS 上使用 !important 指示符。标记为 !important 的内容不会被与出现顺序无关的内容覆盖。

所以回答你的问题。在您自己的 css 文件中，让您的类指定颜色，如下所示：

.myColour
    background-:none!important;
    border:none!important;

然后像这样对你的元素进行分类：

<div class="ui-widget-content myColour" >
  hi world :)
</div>

【讨论】：

您好，感谢您的回答，!important 指示器是创建与 ThemeRoller 兼容的 css 类的好方法。但是我还没有找到一个干净的方法来重用，例如：ui-widget-header的background-color作为border-color

哦，我误解了你的问题。您想将来自不同样式属性的值用于其他样式属性吗？

是的，看我屏幕的老板总是在我的待办事项列表中添加一些奇怪的要求；）猜猜这只有使用一些服务器端 CSS 预处理器才能实现？

嗯，是的，我真的不知道这样做的好方法：（对不起！

【参考方案2】：

既然你也用 less 标记了你的问题，我想你可以使用它。会有一个适合你的解决方案，也许并不完美，但 imo 比你现在使用的更干净。

您可能知道可以在样式声明 B 中使用类名 A 来将 A 中的所有样式属性应用到类 B。它称为 Mixin：http://lesscss.org/#-mixins

我想你可以通过首先使用 mixin 然后覆盖它的属性来实现你所追求的。你的语法看起来像这样：

ma​​ster.less：

@import "jquery-ui.less"

 ... 

.myCustomWidget 
  .ui-widget-content;
  background: none;
  border: none;


...

请注意，我将 jquery-ui.css 的扩展名更改为 .less 以使 less 编译器实际上包含该文件，而不是保留 @import 语句。由于 css 也是有效的，所以你需要对它做的所有事情。

如果你随后将你的 less 编译为 css，你会得到一个类 .myCustomWidget，你可以在 HTML 中使用 apply，而不需要额外的类。此外，如果您通过应用不同的主题或其他内容来更改 jquery-ui.css，则只需重新编译 master.less 即可合并更改。 （我强烈建议你在本地或服务器端预编译你的less文件，而不是让它在客户端由js完成。这样可以防止你的样式依赖js）

另外请注意，您将不再需要链接到 html 中的实际 jquery-ui.css 文件，因为它将完全包含在编译后的 master.css 文件中。这意味着少了一个页面请求，这应该会给您带来性能奖励。

【讨论】：

我已经看过mixins，但我在问是否有办法重用，例如：ui-widget-header 的background-color 作为border-color ？

看来构建 jqueryUi 主题的内容较少。 jqueryuilesscss.sourceforge.net 我还没有进一步调查它，但我想颜色将是变量，如果你导入它们，你应该能够在你自己的 less 文件中重用这些变量。认为这值得研究......