文章自动生成索引 auto generate index

auto-index.css

.content a{ text-decoration: underline; color:#222;}
a:hover{color:#000;}
strong{color:#000;}

#post-content h1 { font-size: 20px;}
#post-content h1 { font-size: 18px;}

.bz_custom,.bz_custom_h{margin: 15px 0;padding: 8px;font-weight: bold;color: #000;}
#post-content h1,#post-content h2,#post-content h3{margin: 15px 0;padding: 8px;font-weight: bold;color: #000;}
#post-content h1,h1.bz_custom,h1.bz_custom_h{background-color: #666;}
#post-content h2,h2.bz_custom,h2.bz_custom_h {background-color: #999;padding: 6px;}
#post-content h3,h3.bz_custom,h3.bz_custom_h {background-color: #ccc;padding: 4px;}

.col8 .no-indent p,#post-content .no-indent p{text-indent:0;}

#indexContainer {background-color: #eee}
#indexContainer .auto_index_top{background:#999;padding: 5px}
#indexContainer .index_label{font-weight:bold;font-size:22px;}
#indexContainer li.autoIndex_H2{text-indent: 2em;}
#indexContainer li.autoIndex_H3{text-indent: 4em;}

auto-index.js

;$(function(){
    if($('#indexContainer').length==0) {
        return;
    }
    var $hTitle = $('#post-content h1,#post-content h2,#post-content h3');
    if ($hTitle.length==0) {
        return;
    }
    var i = 1;
    var indexHtml = '<ul style="">';
    $hTitle.each(function(){
        var $h = $(this);
        var id = "autoIndex_"+i;
        indexHtml += "<li class='autoIndex_"+this.tagName+"'><a href='#"+ id +"' >"+ $h.html() +"</a></li>";
        $h.attr('id', id);
        i++;
    });
    indexHtml +='</ul>';
    indexHtml = "<div class='auto_index_top'><span class='index_label'>目录</span> [<a style='display: none' class='index_toggle' href='###'>展开+</a><a class='index_toggle' href='###'>收起-</a>]</div>"+indexHtml;
    $('#indexContainer').html(indexHtml);

    $('.index_toggle').live('click',function(event){
        $('#indexContainer ul').slideToggle();
        $('.index_toggle').toggle();
        event.preventDefault();
    });
});