jQuery UI主题冲突:SlickGrid和jQuery UI选项卡

Question

我正在尝试应用此SlickGrid示例:

http://mleibman.github.com/SlickGrid/examples/example4-model.html

到我自己的网络项目.

当我将网格放到页面顶部时,它会正确呈现.但是,当我将其放入同一页面上的jQuery UI选项卡选项卡时,呈现搜索图像的CSS Sprite被错误地偏移.

图标呈现为

<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>

看起来jQuery UI Tabs也使用相同的CSS类,当然会出现冲突.

查看IE9中的有效样式,正确呈现的jQuery UI选项卡外部的控件具有以下内容:

呈现错误的控件如下所示:

底线

将SlickGrid放在jQueryUI选项卡中会导致ui-icon-search类丢失,因此设置错误background-position-x/y.

为什么这个课程会丢失,我该如何解决这个问题呢？

Answer 1

问题

当jQueryUI从HTML创建选项卡时,它会添加jQueryUI CSS类.从jQueryUI示例:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

变

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

问题正在发生,因为SlickGrid内容现在作为类的元素的子元素退出ui-widget-content.实际上,网格头中有2个祖先具有该类 - 在上面的代码中看到<div id="tabs">并且<div id="tabs-1">在创建选项卡时都应用了该类.

应用于获取正确搜索图标的jQueryUI CSS规则是:

.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

图标的标记是:

<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>

因此,因此CSS规则.ui-icon,.ui-icon-search并且所述第一与第三规则的匹配.ui-state-default被应用.

但是,当相同的标记作为具有该类的元素的后代存在时,.ui-widget-content上述(.ui-widget-content .ui-state-default)的第3个规则的第2部分也匹配哪个更具体.有关CSS特异性的星球大战主题解释,请参见http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.基本上包含的第三个规则的属性比单个选择器规则更具体,因此覆盖正确的.backgroundbackground-position:50% 50%.ui-icon-searchbackground-position:-160px -112px

解决方案

需要使.ui-icon-search规则与规则相同或更具体.ui-widget-content .ui-state-default,可以通过以下任一方式完成:

1. 添加!important到规则
2. 向规则添加更多选择器

例如

.ui-icon-search {
    background-position: -160px -112px !important;
}

要么

.ui-icon-search, .ui-widget-content .ui-icon-search {
    background-position: -160px -112px;
}

我想不出一种不涉及更改jQueryUI CSS的方法(或者.ui-icon-search使用上面两种解决方案之一复制你自己的CSS中的规则).我真的很想知道自己是否有另一种方式!