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

  • geraldnonadoez

    geraldnonado

    3 Temmuz 2013
  • maxman.tv

    maxman.tv

    29 EKİM 2013
  • VideoGamePervert

    VideoGamePer

    30 AĞUSTOS 2008