今天偶然间看到文档服务器有一个动态目录功能，点击目录能跳转到指定的位置；窗口滑动也能自动更新目录的焦点。

效果

框架

原来使用的是一个开源的jquery-ui控件——tocify.js，它可以遍历页面，把指定的DOM元素抽取出来形成目录。
下载地址参考gitub : [gfranko/jquery.tocify.js]

开发者可以直接下载zip包使用，压缩包里面的内容包括：

  • demos 演示页面（里面有一个google的链接，访问会超时，去掉即可）
  • images 可以忽略
  • libs 额外使用的文件，如jquery,jquery-ui,bootstrap等等
  • src 源文件（包括js以及css）——重点
  • test 忽略
  • 其他忽略

举个栗子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link href="styles/bootstrap.css" rel="stylesheet">
  6. <link href="../src/stylesheets/jquery.tocify.css" rel="stylesheet">
  7. <link href="styles/prettify.css" type="text/css" rel="stylesheet" />
  8. <style>
  9. body {
  10. padding-top: 20px;
  11. }
  12. p {
  13. font-size: 16px;
  14. }
  15. .headerDoc {
  16. color: #005580;
  17. }
  18.  
  19. @media (max-width: 767px) {
  20. #toc {
  21. position: relative;
  22. width: 100%;
  23. margin: 0px 0px 20px 0px;
  24. }
  25. }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="container-fluid">
  31. <div class="row-fluid">
  32. <div class="span3">
  33. <div id="toc">
  34. </div><!--/.well -->
  35. </div><!--/span-->
  36. <div class="span9">
  37. <div class="hero-unit">
  38. <h1>h1-test-aaa</h1>
  39. <h2>h2-test-aaa</h2>
  40. <p>
  41. test
  42. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  43. </p>
  44. <h1>h1-test-bbb</h1>
  45. <h2>h2-test-bbb</h2>
  46. <p>
  47. test
  48. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  49. </p>
  50. <h1>h1-test-ccc</h1>
  51. <h2>h2-test-ccc1</h2>
  52. <h2>h2-test-ccc2</h2>
  53. <p>
  54. test
  55. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  56. </p>
  57. </div><!--/span-->
  58. </div><!--/row-->
  59. </div>
  60.  
  61. <script src="../libs/jquery/jquery-1.8.3.min.js"></script>
  62. <script src="../libs/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
  63. <script src="javascripts/bootstrap.js"></script>
  64. <script src="../src/javascripts/jquery.tocify.js"></script>
  65.  
  66. <script>
  67. $(function() {
  68. var toc = $("#toc").tocify({
  69. selectors: "h1,h2,h3,h4,h5"
  70. });
  71. });
  72. </script>
  73. </body>
  74. </html>

效果就像前面flash中一样

这个控件支持很多的参数,源码中说的比较详细了,下面是默认的参数

  1. // **context**: Accepts String: Any jQuery selector
  2. // The container element that holds all of the elements used to generate the table of contents
  3. context: "body",
  4.  
  5. // **ignoreSelector**: Accepts String: Any jQuery selector
  6. // A selector to any element that would be matched by selectors that you wish to be ignored
  7. ignoreSelector: null,
  8.  
  9. // **selectors**: Accepts an Array of Strings: Any jQuery selectors
  10. // The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure
  11. selectors: "h1, h2, h3",
  12.  
  13. // **showAndHide**: Accepts a boolean: true or false
  14. // Used to determine if elements should be shown and hidden
  15. showAndHide: true,
  16.  
  17. // **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown"
  18. // Used to display any of the table of contents nested items
  19. showEffect: "slideDown",
  20.  
  21. // **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  22. // The time duration of the show animation
  23. showEffectSpeed: "medium",
  24.  
  25. // **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp"
  26. // Used to hide any of the table of contents nested items
  27. hideEffect: "slideUp",
  28.  
  29. // **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  30. // The time duration of the hide animation
  31. hideEffectSpeed: "medium",
  32.  
  33. // **smoothScroll**: Accepts a boolean: true or false
  34. // Determines if a jQuery animation should be used to scroll to specific table of contents items on the page
  35. smoothScroll: true,
  36.  
  37. // **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  38. // The time duration of the smoothScroll animation
  39. smoothScrollSpeed: "medium",
  40.  
  41. // **scrollTo**: Accepts Number (pixels)
  42. // The amount of space between the top of page and the selected table of contents item after the page has been scrolled
  43. scrollTo: 0,
  44.  
  45. // **showAndHideOnScroll**: Accepts a boolean: true or false
  46. // Determines if table of contents nested items should be shown and hidden while scrolling
  47. showAndHideOnScroll: true,
  48.  
  49. // **highlightOnScroll**: Accepts a boolean: true or false
  50. // Determines if table of contents nested items should be highlighted (set to a different color) while scrolling
  51. highlightOnScroll: true,
  52.  
  53. // **highlightOffset**: Accepts a number
  54. // The offset distance in pixels to trigger the next active table of contents item
  55. highlightOffset: 40,
  56.  
  57. // **theme**: Accepts a string: "bootstrap", "jqueryui", or "none"
  58. // Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents
  59. theme: "bootstrap",
  60.  
  61. // **extendPage**: Accepts a boolean: true or false
  62. // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased
  63. extendPage: true,
  64.  
  65. // **extendPageOffset**: Accepts a number: pixels
  66. // How close to the bottom of the page a user must scroll before the page is extended
  67. extendPageOffset: 100,
  68.  
  69. // **history**: Accepts a boolean: true or false
  70. // Adds a hash to the page url to maintain history
  71. history: true,
  72.  
  73. // **scrollHistory**: Accepts a boolean: true or false
  74. // Adds a hash to the page url, to maintain history, when scrolling to a TOC item
  75. scrollHistory: false,
  76.  
  77. // **hashGenerator**: How the hash value (the anchor segment of the URL, following the
  78. // # character) will be generated.
  79. //
  80. // "compact" (default) - #CompressesEverythingTogether
  81. // "pretty" - #looks-like-a-nice-url-and-is-easily-readable
  82. // function(text, element){} - Your own hash generation function that accepts the text as an
  83. // argument, and returns the hash value.
  84. hashGenerator: "compact",
  85.  
  86. // **highlightDefault**: Accepts a boolean: true or false
  87. // Set's the first TOC item as active if no other TOC item is active.
  88. highlightDefault: true

前端那点事儿——Tocify自动生成文档目录的更多相关文章

  1. 使用swagger在netcorewebapi项目中自动生成文档

    一.背景 随着前后端分离模式大行其道,我们需要将后端接口撰写成文档提供给前端,前端可以查看我们的接口,并测试,提高我们的开发效率,减少无效的沟通.在此情况下,通过代码自动生成文档,这种需求应运而生,s ...

  2. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档（ASP.NET Core Web API 自动生成文档）

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  3. MVC WEB api 自动生成文档

    最近在一直在用webapi做接口给移动端用.但是让我纠结的时候每次新加接口或者改动接口的时候,就需要重新修改文档这让我很是苦恼.无意中发现.webapi居然有自动生成文档的功能....真是看见了救星啊 ...

  4. eoLinker 新功能发布，增加了识别代码注释自动生成文档功能

    产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...

  5. SpringBoot 集成Swagger2自动生成文档和导出成静态文件

    目录 1. 简介 2. 集成Swagger2 2.1 导入Swagger库 2.2 配置Swagger基本信息 2.3 使用Swagger注解 2.4 文档效果图 3. 常用注解介绍 4. Swagg ...

  6. 【Sphinx】 为Python自动生成文档

    sphinx 前言 Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等 开始 建一个存放文档的do ...

  7. 使用doctest代码测试和Sphinx自动生成文档

    python代码测试并自动生成文档 Tips:两大工具:doctest--单元测试.Sphinx--自动生成文档 1.doctest doctest是python自带的一个模块.doctest有两种使 ...

  8. 用doxygen自动生成文档

    1. 添加符合doxygen解析规则的注释 (比如函数说明,函数参数/返回值说明) 用qt-creator可以在函数上方一行键入“/**”,然后直接回车,就可以自动生成默认的格式. 2. 安装doxy ...

  9. 使用Sphinx为你的python模块自动生成文档

    Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等. 安装 创建一个sphinx项目 下面的命令会 ...

随机推荐

  1. sql连着function使用

    create function fun002(@thename varchar()) returns int as begin declare @count int select @count=cou ...

  2. How to copy remote computer files quickly to local computer

    if we want copy file from VM(Remote VM) to local computer. Always can not easy copy file so easy. no ...

  3. spring-aop学习

     SpringAOP学习 author:luojie 1.  AOP中的基本概念 AOP的通用术语,并非spring java所特有.很遗憾AOP的术语不是特别的直观.但如果让Spring java来 ...

  4. angularjs的四大特征

    angularjs四大特性: 1.MVC模式: Model:数据,其实就是angular变量($scope.XX,$rootScope.XX); View:数据的呈现,Html+Directive(指 ...

  5. [fortify] open redirect漏洞

    简介: 些通过请求(如查询字符串和表单数据)指定重定向URL的Web程序可能会被篡改,而把用户重定向到外部的恶意URL.这种篡改就被称为开发重定向攻击. 场景分析 假设有一个正规网站http://ne ...

  6. CodeForces 742B Arpa’s obvious problem and Mehrdad’s terrible solution (暴力枚举)

    题意:求定 n 个数,求有多少对数满足,ai^bi = x. 析:暴力枚举就行,n的复杂度. 代码如下: #pragma comment(linker, "/STACK:1024000000 ...

  7. getIdentifier()获取资源Id

    工作需要使用getIdentifier()方法可以方便的获各应用包下的指定资源ID.主要有两种方法:(1)方式一Resources resources = context.getResources() ...

  8. 在VS2010下编译和使用tesseract_ocr识别验证码

    对于自动识别验证码,使用trsseract是个不错的选择,有兴趣的的朋友可以试试. 编译tesseract 官网提供了vs2008的编译说明和工程,但在vs2010下的编译时基本相同的,因此我使用的方 ...

  9. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  10. oracle ORA-12514: TNS: no listener 解决方案

    服务端:oracle 11g 客户端: pl/sql 问题描述: 用客户端 pl/sql 连接登录的时候,提示 "ORA-12514: TNS: no listener". 在服务 ...