jQueryUI 提供了方便的 css 框架:http://jqueryui.com/docs/Theming/API
只需使用 jQueryUI 的 CSS 类(ui-widget-content、ui-widget-header 等),您就可以轻松创建可通过 http://jqueryui.com/ThemeRoller 进行主题化的 html 片段。
我在设计应用程序时有时会缺少的一个功能是重用 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
并在我自己的 CSS 类中将其重用为 color
?
我为此做了一个有点快速但肮脏的解决方案:使用 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/...)来完成它?
最佳答案
CSS 代表层叠样式表。这意味着类设置的样式将“级联”
因此,如果您有自己的 css 文件,请将其包含在 jquery css 之后。它将覆盖 jquery css。同样,如果您将 2 个类附加到 html 元素,则第二个类样式将覆盖第一个类。
覆盖 css 类的特定样式的另一种方法是在 css 上使用 !important 指示符。标记为 !important 的内容不会被其他内容覆盖,无论它们以什么顺序出现。
所以回答你的问题。在您自己的 css 文件中,让您的类指定颜色,如下所示:
.myColour{
background-:none!important;
border:none!important;
}
并像这样对你的元素进行分类:
<div class="ui-widget-content myColour" >
hi world :)
</div>
关于jquery - 重用 jquery-ui 框架类中的 css 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12184536/