袅袅牧童 插件介绍
Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格，我们可以根据实际项目任选其中一种风格，另外必要条件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即现代浏览器上使用。
载入插件
1、引入关键文件
css
<link type="text/css" rel="stylesheet" href="jquery.tocify.css" />
javascript
<script src="jquery.tocify.min.js""></script>
特别引入
<script src="jquery-ui-1.9.1.custom.min.js"></script>
2、HTML标记目录块
//目录
<div id='toc'>你的目录</div>
节点选择（重点说下）
1、默认节点
插件默认的是“h1,h2,h3”，个人可以依照需求更改，但需要注意插件只会选择最开始的头标签，例如你选的h2标签作为第一要标签，那么如果文章中不存在h2标签，那么目录无法生成，即便是存在h3标签也不会去遍历。
博主，在使用时简单加入了个数组递归，避免这个弊端。
2、使用方法
$(function () {
......
....
loadTocify(); //载入目录方法；
.......
;;;
})
function loadTocify(v){
v = v ? v :['h2','h3','h4','h5','b','strong'];
if($('.con_text').find(v[0]).length == 0){
v.shift();
v.length > 0 loadTocify(v):''; //控制开始节点
}
if(v.length > 0){
loadScript('/js/toc/jquery.tocify.min.js',function(){
//初始化插件；
var toc = $("Idtoc").tocify({
context:".con_text",
selectors: v.join(','),
});
checkMulu();
})
} else {
$('Idtoc').remove();
}
}
/**调整目录响应*/
function checkMulu(){
$('Idtoc ul').toggle();
var a = $('Idtoc h1').height();
if(a == 0){
$('Idtoc h1 > span').css('display','auto');
userver ? $('Idtoc').css('min-width','5%') : $('Idtoc').css('min-width','87%');
} else {
$('Idtoc h1 span').css('display','none');
$('Idtoc').css('min-width','40px');
}
}
3、可以初始化的配置
Tocify提供了丰富的选项设置，我们可以根据项目实际需求设置不同的选项参数。以下是主要的几个参数选项介绍：
| 选项 | 说明 | 默认值 |
| context | 任意可用的jQuery选择器 | "body" |
| selectors | 文章节点，可以关联生成目录 | "h1,h2,h3" |
| showAndHide | 是否展示二级目录结构 | true |
| showEffect | 目录展示效果："none", "fadeIn", "show", or "slideDown" | "slideDown" |
| showEffectSpeed | 目录展示速度："slow", "medium", "fast", 或数字(毫秒) | "medium" |
| hideEffect | 目录隐藏效果："none", "fadeOut", "hide", "slideUp" | "none" |
| hideEffectSpeed | 目录隐藏速度："slow", "medium", "fast", 或数字(毫秒) | "medium" |
| smoothScroll | 当点击目录节点菜单时，是否平滑滚动到文章对应的节点内容 | true |
| smoothScrollSpeed | 平滑滚动速率，可以是数字(毫秒) or String: "slow", "medium", or "fast" | "medium" |
| scrollTo | 当页面滚动时，页面顶端与目录之间的间隔 | 0 |
| showAndHideOnScroll | 当滚动页面时，是否显示和隐藏目录子菜单 | true |
| theme | 内容展示风格，可以是"bootstrap", "jqueryui", or "none" | "bootstrap" |
Tocify还提供setOptions()和option()分别来设置和获取选项参数。有关更多Tocify的内容有兴趣的可以参阅
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)