SORU
10 NİSAN 2010, CUMARTESİ


jQuery UI temaları ve HTML tabloları

JQuery CSS temaları kullanarak bir HTML tablo (CSS) tema için herhangi bir yolu var mı?

Benim tüm bileşenleri birlikte farklı görünüyor benim HTML tablo dışında gibiler.

CEVAP
12 NİSAN 2010, PAZARTESİ


Kaynakların bir sürü var:

ThemeRoller desteği ile eklentileri:

jqGrid

DataTables.net

GÜNCELLEME: Burada tablo stili olacak birleştirdim bir şey

<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; }

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BeginnersTech

    BeginnersTec

    8 NİSAN 2011
  • CodingMadeEasy

    CodingMadeEa

    25 EYLÜL 2010
  • pilslajt

    pilslajt

    20 HAZİRAN 2008