1

div内のテーブルの固定ヘッダーを実現するために、以下の拡張機能を作成しました

$.fn.stickyHeader = function (options) {
        options = $.extend({
            setHeaderPercentage: false
        }, options);

        // this should be a div with overflow. we could traverse closest until we find one, but it's best if
        // this
        // is just used correctly.

        var $clone = this.find('table').clone();

        var id = $clone.attr('id') + '-stickyHeader';

        if (options.setHeaderPercentage) {
            var twidth = this.find('table').innerWidth();

            this.find('thead tr').each(function (i, o) {
                var $tr = $clone.find('thead tr').eq(i).find('th');
                var twidth = 0;

                $(o).find('th').each(function (i2, o2) {
                    twidth += $(o2).width();
                });

                $(o).find('th').each(function (i2, o2) {
                    var p = ($(o2).width() / twidth * 100);
                    $tr.eq(i2).css('width', p + '%');
                });
            });
        }

        $clone.find('tbody').remove();
        $clone = $('<div>').append($clone);

        $clone.css({
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'right': '0',
            'margin-right': Cobalt.UI.Helpers.getScrollBarWidth() + 'px', // this will always have the margin even if the
            'display': 'block'
            // scrollbar isn't present
        });

        $clone.attr('id', id);

        var $container = $('<div>');

        $container.css({
            'margin': '0',
            'padding': '0',
            'border': '0',
            'font-size': '100%',
            'font': 'inherit',
            'vertical-align': 'baseline',
            'position': 'relative'
        });

        $container.insertBefore(this).append($clone).append(this);

        return this;
    };

上記の拡張子を以下のように呼びます。

//プロファイル リストのスティッキー ヘッダー

$('#panel').stickyHeader();

私の問題は、ある時点(別の条件)でこの拡張機能を削除するメカニズムが必要なことです。どうすればそれを達成できますか?

編集: $.fn.stickyHeader を削除します。私の場合はうまくいきませんでした...

単純なロジックを使用して、拡張関数内で行われた変更が元に戻されるようなことを行うことはできますか???

前もって感謝します！！！

-- GOK

4

2 に答える 2

0

$(#div).stickyHeader();は実際には正しいセレクターではありません。あなたの意図は、それをすべてのdivタグに適用することだと思います$('div').stickyHeader();。

その場合は、不要なクラスまたは ID を div に追加し、それ$('div:not(#exclude)').stickyHeader();を除外するようなものを使用できます。

于 2013-05-24T07:04:24.447 に答える