5

このSlickGridの例を適用しようとしています。

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

私自身のウェブプロジェクトに。

グリッドをページの上部にドロップすると、正しくレンダリングされます。ただし、同じページのjQuery UIタブタブにドロップすると、検索画像をレンダリングするCSSスプライトが正しくオフセットされません。

問題

アイコンはでレンダリングされます

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

jQuery UIタブも同じCSSクラスを使用しているように見えますが、もちろん競合が発生します。

IE9の効果的なスタイルを見ると、正しくレンダリングされるjQueryUIタブの外部のコントロールには次のものがあります。

正しいスタイル

正しくレンダリングされないコントロールは次のようになります。

間違ったスタイル

結論

SlickGridをjQueryUIタブに配置すると、ui-icon-searchクラスが失われるため、間違っbackground-position-x/yた設定になります。

そのクラスが失われるのはなぜですか。問題を解決するにはどうすればよいですか。

4

1 に答える 1

12

問題

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コンテンツが class を持つ要素の子として存在するようになったため、問題が発生しています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 rules.ui-iconと3 番目のルール.ui-icon-searchの最初の一致.ui-state-defaultが適用されます。

ただし、クラスを持つ要素の子孫として同じマークアップが存在する場合、.ui-widget-content() の上の 3 番目の規則の 2 番目の部分も、より具体的な方.ui-widget-content .ui-state-defaultに一致します。スターウォーズをテーマにしたCSSの詳細については、 http: //www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg を参照してください。基本的に、を含む 3 番目のルールのプロパティは、単一のセレクター ルールよりも具体的であるため、正しい をオーバーライドします。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;
}

.ui-icon-searchjQueryUI CSS の変更 (または、上記の 2 つのソリューションのいずれかを使用して独自の CSS でルールを複製) を伴わない方法は考えられません。自分で別の方法があるかどうか、実際に興味があります。

于 2012-04-01T20:47:21.350 に答える