Конфликт между темами jQuery UI: вкладки SlickGrid и jQuery UI - PullRequest
Новая
       31

Конфликт между темами jQuery UI: вкладки SlickGrid и jQuery UI

5 голосов
/ 01 апреля 2012

Я пытаюсь применить этот пример SlickGrid:

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

для моего собственного веб-проекта.

Когда я опускаю свою сетку в верхнюю частьмоя страница, она правильно отображает.Однако, когда я помещаю его на вкладку jQuery UI Tabs на той же странице, CSS Sprite, который отображает изображение для поиска, некорректно смещается.

The Problem

Значок отображается с 

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

Похоже, что вкладки пользовательского интерфейса jQuery также используют те же классы CSS, и, конечно, возникает конфликт.

Если посмотреть на эффективные стили в IE9, элемент управления вне вкладок пользовательского интерфейса jQuery, которыйправильно отображает имеет следующее:

Correct styles

Элемент управления, который отображает неправильно выглядит следующим образом:

Wrong styles

Bottom Line

Размещение SlickGrid на вкладке jQueryUI приводит к потере класса ui-icon-search и, следовательно, неправильному background-position-x/y.

Почему этот класс теряется и какя могу решить проблему?

1 Ответ

12 голосов
/ 02 апреля 2012

Проблема

Когда 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"> оба применяют этот класс при создании вкладок.

Правила CSS jQueryUI, которые должны применяться для получения правильного значка поиска: 

.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 и first соответствия 3-го правила .ui-state-default применяются.

Однако, когда такая же разметка существует как потомок элемента с классом .ui-widget-content, 2-йчасть третьего правила, приведенного выше (.ui-widget-content .ui-state-default), также совпадает с более конкретно .См. http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg для тематического объяснения CSS * в стиле Star Wars .По существу, свойство background 3-го правила, которое включает background-position:50% 50%, более конкретно, чем правило единственного селектора .ui-icon-search, поэтому оно переопределяет правильное background-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 с одним из двух решений выше).На самом деле мне было бы интересно узнать, есть ли другой путь сам!

...