查看“Widget:Toc2Table”的源代码

<noinclude>Only for {{tl|Toc2Table}}</noinclude><includeonly><!--{if !isset($wgToc2Table) || !$wgToc2Table}--><!--{assign var="wgToc2Table" value=true scope="global"}--><span id="notoc"></span><style>
.NOTOC {
    display: none!important;
}

.NOTOC.show {
    width: 100%;
}

#tocul {
    -webkit-column-width: 250px;
    -moz-column-width: 250px;
    column-width: 250px;
}

#toc2Table td {
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre;
}
</style><script>
/* global mw */
window.RLQ = window.RLQ || [];
window.RLQ.push(function () {
    mw.loader.implement('widgetToc2Table', function () {
        if (!$('#toc2TableSetting')[0]) return;
        var setting = {
            tableStyle: null,
            listLength: 4,
            title: '目录',
            titleStyle: null,
            tdStyle: null,
            borderColor: undefined,
            noNumber: null,
            noIndex: null
        },
            dataset = $('#toc2TableSetting')[0].dataset,
            $tocLine = $('#toc .toclevel-1'),
            $tocTable = $('<table/>', {
                id: 'toc2Table'
            }), styleFun = function (sS) {
                if (!sS) return {
                    'none': 'nothing'//anti jQuery.css check and make the chain call available
                };
                var array = sS.split(';'),
                    o = {},
                    i, l = array.length, t;
                for (i = 0; i < l; i++) {
                    if (!array[i]) continue;
                    t = array[i].split(':');
                    if (t.length != 2) continue;
                    o[t[0].trim()] = t[1];
                }
                return o;
            },
            tocnumberLength, temp, index, noIndexArray;
            
        //$.extend will overwrite dest value even if src value is empty
        for (index in dataset) dataset[index] ? setting[index] = dataset[index] : '';
        $('#toc2TableSetting').html() ? setting.title = $('#toc2TableSetting').html() : '';

        //DOM work
        if (setting.noIndex) {
            noIndexArray = setting.noIndex.split(',').reverse();
            $.each(noIndexArray, function (i, v) {
                $tocLine.splice(v, 1);
            });
        }
        $tocTable.append('<caption>' + setting.title + '</caption>');
        $tocLine.each(function (index) {
            if (index % setting.listLength == 0) $tocTable.append('<tr></tr>');
            temp = $tocTable.find('tr:last').append('<td></td>').find('td:last').append($tocLine.eq(index).clone().children('a')).find('a');
            if (!temp.find('.tocnumber')[0]) temp.prepend('<span class="tocnumber">' + (index + 1) + '</span>');
            tocnumberLength = ((index + 1) + '').length;
        })
        if ($('#toc2TableSetting').prevAll('h2')[0]) $('#toc2TableSetting').after($tocTable);
        else $('#toc').after($tocTable);
        $('#toc').remove();
        
        //UI work
        $tocTable.css('width', '100%')//                                        TableStyle: default width,
            .css(styleFun(setting.tableStyle))//                                            user style;
            .find('caption').css(styleFun(setting.titleStyle))//                TitleStyle: user style;
            .end().find('td').css(styleFun(setting.tdStyle));//                 TdStyle:    user style;
        if (setting.borderColor) $tocTable.css('border-collapse', 'collapse')// TableStyle: border collapse;
            .find('tr:last').each(function () {//                               chain call: if the last line doesn't has enough tds, add to enough
                var i = setting.listLength - $(this).find('td').length;
                while (i--) $(this).append('<td>&#32;</td>');
            }).css('border-color', setting.borderColor)
            .end().find('td').css({
                'border': '1px solid #a7d7f9',//                                TdStyle:    default color(#a7d7f9) to make sure that even if user set a wrong color string, border color will be set as default.
                'width': (100 / setting.listLength) + '%'
            });

        if (setting.noNumber == "true") $('.tocnumber').remove();
        else $('.tocnumber').each(function () {
            if ($(this).text().length == tocnumberLength) return;
            temp = $(this).prepend('<span style="speak:none;visibility:hidden;color:transparent"></span>').find('span');
            while (tocnumberLength - $(this).text().length) temp.append('0');
        });
    });
});</script><!--{/if}--></includeonly>