JQuery UI темы и HTML-таблицы - PullRequest
Новая
       40

JQuery UI темы и HTML-таблицы

45 голосов
/ 10 апреля 2010

Можно ли как-нибудь оформить таблицу HTML (CSS) с помощью тем jQuery CSS?

Все мои компоненты выглядят так, как будто они вместе, за исключением моей таблицы HTML, которая выглядит по-разному.

Ответы [ 3 ]

60 голосов
/ 13 апреля 2010

Существует множество ресурсов:

Плагины с поддержкой ThemeRoller:

jqGrid

DataTables.net

ОБНОВЛЕНИЕ: Вот кое-что, что я собрал, чтобы стилизовать таблицу: 

<script type="text/javascript">

    (function ($) {
        $.fn.styleTable = function (options) {
            var defaults = {
                css: 'styleTable'
            };
            options = $.extend(defaults, options);

            return this.each(function () {

                input = $(this);
                input.addClass(options.css);

                input.find("tr").live('mouseover mouseout', function (event) {
                    if (event.type == 'mouseover') {
                        $(this).children("td").addClass("ui-state-hover");
                    } else {
                        $(this).children("td").removeClass("ui-state-hover");
                    }
                });

                input.find("th").addClass("ui-state-default");
                input.find("td").addClass("ui-widget-content");

                input.find("tr").each(function () {
                    $(this).children("td:not(:first)").addClass("first");
                    $(this).children("th:not(:first)").addClass("first");
                });
            });
        };
    })(jQuery);

    $(document).ready(function () {
        $("#Table1").styleTable();
    });

</script>

<table id="Table1" class="full">
    <tr>
        <th>one</th>
        <th>two</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

CSS: 

.styleTable { border-collapse: separate; }
.styleTable TD { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.styleTable TH { text-align: center; padding: .8em .4em; }
.styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }
31 голосов
/ 02 апреля 2012

dochoffiday's answer - отличная отправная точка, но для меня это не сработало (для CSS-части требовался положительный эффект), поэтому я сделал измененную версию с несколькими улучшениями.

Посмотрите это в действии, затем вернитесь за описанием .

JavaScript 

(function ($) {
    $.fn.styleTable = function (options) {
        var defaults = {
            css: 'ui-styled-table'
        };
        options = $.extend(defaults, options);

        return this.each(function () {
            $this = $(this);
            $this.addClass(options.css);

            $this.on('mouseover mouseout', 'tbody tr', function (event) {
                $(this).children().toggleClass("ui-state-hover",
                                               event.type == 'mouseover');
            });

            $this.find("th").addClass("ui-state-default");
            $this.find("td").addClass("ui-widget-content");
            $this.find("tr:last-child").addClass("last-child");
        });
    };
})(jQuery);

Отличия от оригинальной версии:

  • класс CSS по умолчанию был изменен на ui-styled-table (звучит более согласованно)
  • вызов .live был заменен рекомендованным .on для jQuery 1.7 и выше
  • явное условное выражение было заменено на .toggleClass (более краткий эквивалент)
  • код, который устанавливает неверно названный класс CSS first в ячейках таблицы, был удален
  • код, который динамически добавляет .last-child к последней строке таблицы, необходим для исправления визуального сбоя в Internet Explorer 7 и Internet Explorer 8; для браузеров, которые поддерживают :last-child, нет необходимости

CSS 

/* Internet Explorer 7: setting "separate" results in bad visuals; all other browsers work fine with either value. */
/* If set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td  { border-left-width: 0px !important; } */
table.ui-styled-table { border-collapse: collapse; }

/* Undo the "bolding" that jQuery UI theme may cause on hovered elements
/* Internet Explorer 7: does not support "inherit", so use a MS proprietary expression along with an Internet Explorer <= 7 targeting hack
        to make the visuals consistent across all supported browsers */
table.ui-styled-table td.ui-state-hover {
    font-weight: inherit;
    *font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}

/* Initally remove bottom border for all cells. */
table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }

/* Hovered-row cells should show bottom border (will be highlighted) */
table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }

/* Remove top border if the above row is being hovered to prevent double horizontal borders. */
table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 0px !important; }

/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 7, Internet Explorer 8: selector dependent on CSS classes because of no support for :last-child */
table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }

/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* Internet Explorer 9 and later, Firefox, Chrome: make sure the visuals are working even without the CSS classes crutch. */
table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }

Примечания

Я проверил это в Internet Explorer 7 и более поздних версиях, Firefox 11 и Google Chrome 18 и подтвердил, что оно отлично работает. У меня не проверено достаточно ранние версии Firefox и Chrome или любой версии Opera ; тем не менее, эти браузеры хорошо известны хорошей поддержкой CSS, и, поскольку мы здесь не используем никаких передовых функций, я полагаю, что и там они будут отлично работать.

Если вы не заинтересованы в поддержке Internet Explorer 7, есть один атрибут CSS (добавлен в виде звездочки), который можно использовать.

Если вы не заинтересованы в поддержке Internet Explorer 8, CSS и JavaScript, относящиеся к добавлению и нацеливанию на класс last-child CSS, также могут подойти.

17 голосов
/ 27 мая 2013

Почему просто использовать стили темы в таблице? т.е. 

<table>
  <thead class="ui-widget-header">
    <tr>
      <th>Id</th>
      <th>Description</th>
    </td>
  </thead>
  <tbody class="ui-widget-content">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
      .
      .
      .
  </tbody>
</table>

И вам не нужно использовать какой-либо код ...

...