查看“Widget:TocFloat”的源代码

<noinclude>这只应用在有较长目录的地方。</noinclude><includeonly><!--{if !isset($wgTocFloat) || !$wgTocFloat}--><!--{assign var="wgTocFloat" value=true scope="global"}--><style>
#tocBox {
    max-width: 37%;
    min-width: 300px;
    float: left;
}

div.toc#toc {
    min-width: 300px;
    box-sizing: border-box;
    margin-right: 37px;
    padding-right: 1em;
    padding-left: 1em;
}

div.toc#toc div#toctitle h2 {
    margin-right: 1em;
}

div.toc.noOrigin#toc .toctoggle {
    display: none;
}

div#toc.toc #toctoggle,
div#toc.toc #toggle {
    font-size: 94%;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

div#toc.toc .toggleButton:before {
    content: "[";
    color: black;
}

div#toc.toc .toggleButton:after {
    content: "]";
    color: black;
}

#toc .toggleButton:first-child {
    margin-right: 0.5em;
}

div#toc.toc .toggleButton:last-child {
    margin-right: 0;
}

div#toc.toc .hiddenDiscussion {
    visibility: hidden;
    height: 0;
    margin: 0;
}

div.toc#toc li.savedDiscussion a {
    text-decoration: underline;
}

#toc div#tocText {
    text-align:center;
}

#toc div.tocText {
    display:inline-block;
}

/* 节操酱的beg */
#content ol,
#content ul {
    margin: 0 !important;
    padding: 0.3em 0 0 1.6em !important;
}

#toc .toclevel-1 > ul {
    padding-left: 0!important;
}

/* 由于节操酱的beg导致分类那边有秘制空白 */
#content #catlinks ol,
#content #catlinks ul {
    padding: 0 !important;
}
</style>
<script>
/* global mw */
window.RLQ = window.RLQ || [];
window.RLQ.push(function() {
    mw.loader.implement('widgetTocFloat', function() {
        $(function() {
            var $toc = $('#toc'),
                $tocBox, $level2, $li, $svdDcs, $title, $toggle, $tocText,
                appendToggleButton;

            /* 预处理 */
            //标记存档讨论串
            $('.saveNotice').each(function() {
                var prevHeadline = $(this).prev('h2');
                if (prevHeadline[0]) $toc.find('a[href="#' + prevHeadline.find('.mw-headline')[0].id + '"]').parent().addClass("savedDiscussion hiddenDiscussion");
            });
            //整理标题列表
            $toc.append("<ol style='margin-left: 1.7em;'></ol>").after('<div id="tocBox"></div>');
            $toc.children('ul').children().appendTo($toc.find('ol'));
            $toc.find(".toclevel-1 > a > .tocnumber").remove();
            $toc.appendTo("#tocBox");

            /* 定义变量 */
            $tocBox = $('#tocBox');
            $level2 = $toc.find('.toclevel-2').hide();
            $li = $toc.find('ol > li');
            $svdDcs = $toc.find('.savedDiscussion');
            $title = $toc.find('#toctitle').css("margin-right", "1em").append('<span id="toctoggle"></span>');
            $toggle = $title.append('<div id="toggle"></div>').find('#toggle');
            $tocText = $title.after('<div id="tocText"></div>').parents('#toc').find('#tocText');
            appendToggleButton = function($Obj, $set, shTx, hiTx, fun) {
                if (!$Obj[0]) return false;
                $set.append($('<a/>', {
                    text: function() {
                        if ($Obj.is(':visible')) return hiTx;
                        else return shTx;
                    },
                    'class': 'toggleButton',
                    href: 'javascript:void(0);',
                    bind: {
                        click: function() {
                            if ($Obj.is(':visible')) {
                                $Obj.fadeOut();
                                $(this).text(shTx);
                            } else {
                                $Obj.fadeIn();
                                $(this).text(hiTx);
                            }
                        }
                    }
                }));
                if (typeof fun == 'function') fun();
            };

            /* 业务处理*/
            //添加存档讨论串标题toggle按钮
            if ($svdDcs[0]) {
                $toggle.append($('<a/>', {
                    text: '显示已被存档标题',
                    'class': 'toggleButton',
                    href: 'javascript:void(0);',
                    bind: {
                        click: function() {
                            if ($svdDcs.hasClass('hiddenDiscussion')) {
                                $svdDcs.removeClass('hiddenDiscussion');
                                $(this).text('隐藏已被存档标题');
                            } else {
                                $svdDcs.addClass('hiddenDiscussion');
                                $(this).text('显示已被存档标题');
                            }
                        }
                    }
                }));
                $tocText.append("<div class='tocText'>（有下划线标题是已被存档标题）</div>");
            }
            //添加二三四五级标题toggle按钮和标题数量
            appendToggleButton($level2, $toggle, '显示段落', '隐藏段落', function() {
                $tocText.append("<div class='tocText'>（中括号内数字是该大段下小段数量）</div>");
                $toc.find('.toclevel-1').each(function() {
                    var subtitleLength = $(this).find('.toctext').length - 1;
                    if (subtitleLength) $(this).children('a').after('[' + subtitleLength + ']');
                });
            });
            //添加整体toggle按钮
            appendToggleButton($toc.find('ol'), $title.find('#toctoggle'), '显示', '隐藏');
            $('#toc').addClass('noOrigin');
        });
    });
});
</script>
<!--{/if}--></includeonly>