Tocible 轻量级文章内导航目录 jQuery 插件

Question

Tocible 是一个轻量级的插件，依赖于 jQuery 库，用于创建文章页内容的导航目录菜单，易于集成和支持响应性设计的效果，插件自带滚动监听自动隐藏和显示二级目录菜单。

安装 Tocible

你可以访问 Tocible 的 Github 地址，然后从右侧下 Tocible 的压缩包，解压到你的项目目录中，然后在你的网页头部中引入插件文件，千万别忘了先引入 jQuery 库。

<link rel="stylesheet" href="jquery.tocible.css"/>
<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.js"></script>
<script src="jquery.tocible.js"></script>

基本使用方法

jQuery Tocible 会自动创建一个目录导航菜单，单击并遵循了用户滚动监听锚事件。

Tocible 根据 H 标签来生成导航目录，所以文章内容中必须要有标题，例如编写下面的 HTML 代码

<div id="contents">
    <div class="ref">
      <!-- 
        This element will be the reference 
        for the navigation list positioning, 
        especially on RWD, so position well 
        to your liking. 
      -->
    </div>
    <article>
        <h2>Heading</h2>
        <p>...</p>
        <h3>SubHeading</h3>
        <p>...</p>  
    </article>
</div>

我们还需要添加一个导航内容生成的容器，给他添加一个 Class 类。

最后我们通过 tocible() 方法调用插件，通过传递 JSON 格式的参数配置插件。

$('#container').tocible({
    heading: 'h2', //[selector], the first level heading
    subheading: 'h3', //[selector], the second level heading
    reference:'.ref', //[selector], reference element for horizontal positioning
    title: '', //[selector or string], title of the menu
    hash: false, //[boolean], setting true will enable URL hashing on click
    offsetTop: 50, //[number], spacing/margin above the menu
    speed: 800, //[number or string ('slow' & 'fast')], duration of the animation when jumping to the clicked content
    collapsible: true //[boolean], enabling true will auto collapse sub level heading not being scrolled into
    maxWidth: 150 //[number], set max-width of the navigation menu
});

插件的所有可选参数如上面的代码所示。

Github地址：https://github.com/markserbol/tocible

下载地址：https://www.wenjiangs.com/wp-content/uploads/2019/05/tocible.zip