用jquery實現文章自動生成二級目錄（續）

    前文：用jquery實現文章自動生成二級目錄。

使用方法的補充

    咱們能夠把咱們的js和css上傳到博客園，而後在頁面HTML代碼中使用他們。

發現的一些問題

    在我把個人js放到本身的博客園上運行以後發現了幾個問題：

1. 博客園博客的子標題用的是h2，自動生成目錄的js把博客的子標題也加入到了目錄中。
2. 寫了一篇比較長的博客，發現用目錄跳到某處後沒有連接返回目錄處，有些不方便。
3. 每次寫完文章還得在文章的HTML中加目錄的div。

解決問題

    參考：薰衣草的旋律的一篇文章。

1. 博客園子標題的問題，只要把一級標題的選擇器改一下就好。
2. 在每一個標題前面加上回到頂部的標籤。
3. 在js中本身加div並放到文章所在層的開頭。
4. 另外增長了一些css和js動畫，讓目錄顯示在頁面右側而且靠邊。

最後的代碼

    js：

var flag = 0;
$(document).ready(function() {
    GenerateContents2();
    contents_show();
});

function GenerateContents() {
    var num = 0;
    var content = "<ul>";
    $("#cnblogs_post_body h3").each(function(){
        //原來是$("h2")
        content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
        $(this).before(GenerateLabel(num));
        num++;
    });
    content += "</ul>"
    content = packeageContent(content);
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }
}

function GenerateContents2() {
    var num = 0;
    var content = "<ul>";
    $("#cnblogs_post_body h3").each(function(){
        content += "<li>"+GenerateA(num,$(this).text());
        $(this).before(GenerateLabel(num));
        num++;

        var second = $(this).nextUntil("#cnblogs_post_body h3","#cnblogs_post_body h4");
        if (second) {
            content += "<ul>";
            second.each(function(){
                    content += "<li>"+GenerateA
                        (num,$(this).text())+"</li>";
                    $(this).before(GenerateLabel(num));
                    num++;
                }
            );
            content += "</ul>";
        };
        content += "</li>";
    });
    content += "</ul>";
    content = packeageContent(content);
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }
}


//這兩個函數原本想的是之後改着方便
function GenerateLabel(num) {
    var a = "<div><a name = 'label" + num + "'></a>";
    a += "<a href='#top' style='float:right'>回到頂部</a>"
    a += "</div>"
    return a;
}

function GenerateA(num ,text) {
    var ss = "<a href='" + "#label" 
            + num +"'>" + text
            + "</a>";
    return ss;
}

function packeageContent(content) {
    var tmp = "<a name='top'></a>" ;
    tmp += "<div id='contents'>";
    tmp += "<div id='button'><b style='font-size:18px'>閱讀目錄</b></div>";
    tmp += "<div id='contents_main'>";
    tmp += content;
    tmp += "</div>";
    tmp += "</div>";
    return tmp;
}

function contents_show(){
    var button = $("#cnblogs_post_body #contents #button");
    $(button).click(
        function(){
            if (flag == 0) {
                $("#contents_main").show("slow");
                flag = 1;
            } else {
                $("#contents_main").hide("slow");
                flag = 0;
            }
        }
        );
}

    css代碼：

#cnblogs_post_body #contents {
    position: fixed;
    right: 0px;
    top: 454px;
    background-color: #FFF6DC;
    border: 2px solid #FEC447;
}

#contents_main a {
    height: 1.4em;
    display: block;
}

#cnblogs_post_body #contents #button {
    width: 2em;
    float: left;
    text-align: right;
}

#cnblogs_post_body #contents #button:hover {
    background-color: #fff;
}

#cnblogs_post_body #contents #contents_main {
    display: none;
    float: right;
}
#cnblogs_post_body a {
    text-decoration: none;
    color: #2769C0;
    padding: 1px 2px;
}
#cnblogs_post_body a:hover{
    color: #fff;
    background-color: #78AFD3;
    padding: 1px 2px;
}
#cnblogs_post_body ul li {
    list-style: inherit!important;
    margin-bottom: 0.1em;
}

    雖然樣式有點醜。。