您现在的位置是:首页 >  编程分享 > EXPERIENCEEXPERIENCE

使用tocify给文章添加目录的过程

袅袅牧童 推荐 原创 编程分享 2019-01-14

简介 tocify是一个JQuery 插件,简单的给文章添加目录,觉得比较简单,基本需求也够,弄下来看看。



插件介绍

官网 和 GitHub

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的内容有兴趣的可以参阅


Tags:


上一篇:MYSQL常见考点

下一篇:js正则表达式初探

本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

最新评论

标签云