夏日博客

A-A+

基于jquery插件Tocify动态节点目录菜单生成器

2016年01月13日 前端设计 暂无评论 阅读 7 views 次

Tocify插件是基于jquery的一个节点目录菜单生成器了，我们看到一个不错的关于Tocify节点目录菜单生成器的例子，下面我们就一起来看看吧．

Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章，文章有多个节点，那么使用Tocify可以根据节点元素动态生成文章目录，点击目录可以平滑滚动到对应的节点，当然当滚动页面时，目录结构会根据当前监听到的节点进行切换到当前目录状态。

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格，我们可以根据实际项目任选其中一种风格，另外必要条件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即现代浏览器上使用。

引入CSS和Javascript文件

css文件

  1. <link type="text/css" rel="stylesheet" href="jquery.tocify.css" />  
  2. <link type="text/css" rel="stylesheet" href="bootstrap.css" />   

JavaScript文件

  1. <script src="jquery-1.7.2.min.js"></script>   
  2. <script src="jquery-ui-1.9.1.custom.min.js"></script>   
  3. <script src="jquery.tocify.min.js""></script>  

HTML结构

创建一个DIV标签，然后给这个标签添加一个ID或者Class，例如：toc

  1. <div id="toc"></div>   

这个div#toc它默认是空的内容，它用来动态生成文章目录，那文章目录如何动态关联文章节点的呢？我们还需要把文章节点做一些规划，如：

  1. <div class="wrap">   
  2.     <h1>Tocify</h1>   
  3.     <br />   
  4.     <section>   
  5.         <h2>节点1</h2>   
  6.         <p>内容</p>   
  7.     </section>   
  8.     <br />   
  9.     <section>   
  10.         <h2>节点2</h2>   
  11.         <p>内容</p>   
  12.     </section>   
  13.     ...   
  14. </div>  

以上的HTML结构代码大家可以修改tocify的CSS文件来满足你项目视觉的需求。

Javascript

使用jQuery选择选中我们的toc元素，然后通过tocify()方法调用Tocify插件。

  1. $(function() {   
  2.   $("#toc").tocify();   
  3. });   

如此，运行网页，一个动态的文章目录就生成了。

选项设置

Tocify提供了丰富的选项设置，我们可以根据项目实际需求设置不同的选项参数。

标签：

给我留言