Тематика пользовательского интерфейса jQuery в плагине datatables - PullRequest
Новая
       23

Тематика пользовательского интерфейса jQuery в плагине datatables

1 голос
/ 18 июля 2011

Я использую плагин jquery datatables и добавил несколько пользовательских кнопок jquery-ui в нижний колонтитул таблицы.Чтобы использовать плагин datatables с темой jquery-ui, необходимо включить параметр «bJQueryUI».

Пока проблем нет, но теперь я добавил themeroller jquery-ui на свою страницу.

Когда я меняю тему, все компоненты jquery-ui меняют свой стиль соответствующим образом, точно так же, как данные, за исключением кнопок внутри таблицы данных.

Я обнаружил, что это на самом деле проблема с приоритетом css:новые стили, применяемые themeroller, имеют более низкий приоритет, чем оригинальные, поэтому эти кнопки никогда не меняют свой внешний вид.

Поскольку компоненты jquery-ui и плагин datatables довольно популярны, я подумал, что найду кого-нибудь саналогичные проблемы, но пока не повезло ..

Вот как выполняется инициализация таблицы данных и создание пользовательских кнопок: 

<table id="DataTable">
// ...
</table>
<script type="text/javascript">
    $(function ()
    {
        var oDataTable = $('#DataTable').dataTable({
            "aaData": result.aaData,
            "bPaginate": false,
            "bJQueryUI": true,
            "bInfo": true,
            "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
            "oTableTools":
            {
                "sRowSelect": "single"
            }
        });
        // add buttons
        $("div.toolbar").html('<button id="AddButton">New element</button>');
        $("#AddButton").button().click(function () { /* ... */ });
        // add more buttons...
    }
</script>

Вот скриншот фактического HTMLструктура и применяемые css-стили: http://i.stack.imgur.com/vbAuy.jpg

Любая подсказка очень ценится.

Ответы [ 3 ]

1 голос
/ 18 июня 2014

Я сам нашел решение:

Если я добавлю CSS-класс "ui-widget-content" в div панели инструментов-контейнера, стили будут применены правильно. Чтобы удалить стили, к которым применяется этот класс (границы и фон), я добавил более конкретный стиль CSS, чтобы удалить их: 

div.toolbar
{
    float: right;
    border: 0;
    background: 0;
}

Здесь важно использовать «div.toolbar», а не «.toolbar», в противном случае применяются стили ui-widget-content. Теперь контейнер панели инструментов не применяет нежелательные стили, а кнопки внутри правильно отображают выбранную тему.

Может быть, это полезно для тех, кто использует themeroller с пользовательскими кнопками jquery-ui в таблицах данных.

0 голосов
/ 09 ноября 2011

Не уверен, что у вас возникла эта проблема, но есть два отдельных класса css с таблицами данных.Какой из них использовать, зависит от того, есть ли у вас bJQueryUI: true или bJQueryUI: false

0 голосов
/ 18 июля 2011

Если вы хотите, чтобы тема управляла стилем кнопки, затем закомментируйте CSS, который переопределяет стиль ролика темы.

Если они являются тематическими кнопками, то вам придется удалить свой CSS дляпозволить теме вступить в силу.Темы легко перезаписываются, поэтому вы можете добавить настройку, только звучит так, будто вы больше не хотите ее настраивать.

...