http://blog.csdn.net/haleypku/article/details/51226704 此文可以只了解一下概念；
http://i5ting.github.io/i5ting_ztree_toc/ 此文說有 引用的文件；
《\jQuery精品教程視頻\jQuery精品教程資料\19-jQuery第一天\01-教學資料\筆記\preview\template.html》
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{{title}}</title> <link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/> <link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/> <link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/> <style> pre { counter-reset: line-numbering; border: solid 1px #d9d9d9; border-radius: 0; background: #fff; padding: 0; line-height: 23px; margin-bottom: 30px; white-space: pre; overflow-x: auto; word-break: inherit; word-wrap: inherit; } pre a::before { content: counter(line-numbering); counter-increment: line-numbering; padding-right: 1em; /* space after numbers */ width: 25px; text-align: right; opacity: 0.7; display: inline-block; color: #aaa; background: #eee; margin-right: 16px; padding: 2px 10px; font-size: 13px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } pre a:first-of-type::before { padding-top: 10px; } pre a:last-of-type::before { padding-bottom: 10px; } pre a:only-of-type::before { padding: 10px; } .highlight { background-color: #ffffcc } /* RIGHT */ </style> </head> <body> <div> <div style='width:25%;'> <ul id="tree" class="ztree" style='width:100%'> </ul> </div> <div id='readme' style='width:70%;margin-left:20%;'> <article class='markdown-body'> {{{parse_markdown}}}//此處替換你的文章 </article> </div> </div> </body> </html> <script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="toc/js/ztree_toc.js"></script> <script type="text/javascript" src="toc_conf.js"></script> <SCRIPT type="text/javascript" > <!-- $(document).ready(function(){ var css_conf = eval(markdown_panel_style); $('#readme').css(css_conf) var conf = eval(jquery_ztree_toc_opts); $('#tree').ztree_toc(conf); }); //--> </SCRIPT>
引入3個文件：
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="toc/js/ztree_toc.js"></script>
自己定義的一個js toc_conf.js
var jquery_ztree_toc_opts = { debug:false, is_auto_number:true, documment_selector:'.markdown-body', ztreeStyle: { width:'326px', overflow: 'auto', position: 'fixed', 'z-index': 2147483647, border: '0px none', left: '0px', top: '0px', // 'overflow-x': 'hidden', 'height': $(window).height() + 'px' } } var markdown_panel_style = { 'width':'70%', 'margin-left':'25%' };
會根據 h1 到h6 在左邊生成 結構目錄。舉例：比如復制以下一段文字 代替{{{parse_markdown}}}就會看到效果：
<h1 id="jquery-">jQuery基本概念</h1> <blockquote> <p>學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。</p> </blockquote> <h2 id="-jquery-">為什么要學習jQuery？</h2> <p>【01-讓div顯示與設置內容.html】</p> <p>使用javascript開發過程中，有許多的缺點：</p> <pre><code class="lang-javascript">1. 查找元素的方法太少，麻煩。 2. 遍歷偽數組很麻煩，通常要嵌套一大堆的for循環。 3. 有兼容性問題。 4. 想要實現簡單的動畫效果，也很麻煩 5. 代碼冗余。 </code></pre> <h2 id="jquery-">jQuery初體驗</h2> <p>【02-讓div顯示與設置內容.html】</p>
