Tocible 轻量级文章内导航目录 jQuery 插件 - 资源分享

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

发布于 2019-05-22 字数 2689 浏览 1303 评论 0

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0