24 |
25 |
34 |
35 | {{ content }}
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/docs/assets/jquery.toc.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndabas/toc/d84b1dd1172be7a6337fe1ab16726636c1896d9d/docs/assets/jquery.toc.zip
--------------------------------------------------------------------------------
/docs/css/docs.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * CSS for Table of Contents jQuery Plugin docs, based on the 'Narrow jumbotron' Bootstrap example
3 | */
4 |
5 | body {
6 | padding-top: 20px;
7 | padding-bottom: 40px;
8 | }
9 |
10 | .header,
11 | .content
12 | .footer {
13 | padding-right: 15px;
14 | padding-left: 15px;
15 | }
16 |
17 | .header {
18 | padding-bottom: 20px;
19 | border-bottom: 1px solid #e5e5e5;
20 | }
21 |
22 | .header h3 {
23 | margin-top: 0;
24 | margin-bottom: 0;
25 | line-height: 40px;
26 | }
27 |
28 | .footer {
29 | padding-top: 19px;
30 | color: #777;
31 | border-top: 1px solid #e5e5e5;
32 | }
33 |
34 | @media (min-width: 768px) {
35 | .container {
36 | max-width: 730px;
37 | }
38 | }
39 |
40 | .jumbotron {
41 | margin: 60px 0;
42 | text-align: center;
43 | background-color: #fff;
44 | }
45 |
46 | .jumbotron h1 {
47 | font-size: 72px;
48 | line-height: 1;
49 | }
50 |
51 | .jumbotron .btn {
52 | font-size: 21px;
53 | padding: 14px 24px;
54 | }
55 |
56 | .content {
57 | margin: 60px 0;
58 | }
59 |
60 | .content p + h4 {
61 | margin-top: 28px;
62 | }
63 |
64 | @media screen and (min-width: 768px) {
65 | .header,
66 | .content,
67 | .footer {
68 | padding-right: 0;
69 | padding-left: 0;
70 | }
71 |
72 | .header {
73 | margin-bottom: 30px;
74 | }
75 | }
76 |
77 | /* google-code-prettify */
78 |
79 | .com { color: #93a1a1; }
80 | .lit { color: #195f91; }
81 | .pun, .opn, .clo { color: #93a1a1; }
82 | .fun { color: #dc322f; }
83 | .str, .atv { color: #D14; }
84 | .kwd, .prettyprint .tag { color: #1e347b; }
85 | .typ, .atn, .dec, .var { color: teal; }
86 | .pln { color: #48484c; }
87 |
88 | .prettyprint {
89 | padding: 8px;
90 | background-color: #f7f7f9;
91 | border: 1px solid #e1e1e8;
92 | }
93 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Table of Contents jQuery Plugin — jquery.toc
4 | ---
5 |
22 |
Live Example
23 |
24 |
Table of contents, auto-generated from the content on this page:
25 |
26 |
27 |
28 |
Usage
29 |
30 |
31 | You can download the latest release, or install with
32 | Twitter's Bower:
33 | bower install jquery.toc.
34 |
35 |
36 | Include jQuery (>= 1.6) and jquery.toc.js/jquery.toc.min.js on your page. The plugin can
37 | then be used either via HTML5 data attributes, or via the programmatic API. See below for
38 | the available options.
39 |
40 |
Via data attributes
41 |
42 |
Minimal example:
43 |
44 |
<ul data-toc></ul>
45 |
46 |
With options:
47 |
48 |
<ol data-toc="div.container" data-toc-headings="h2,h3,h4"></ol>
49 |
50 |
Via the JavaScript programmatic API
51 |
52 |
Minimal example:
53 |
54 |
<ul id="toc"></ul>
55 | ...
56 | <script type="text/javascript">
57 | $("#toc").toc();
58 | </script>
59 |
60 |
With options:
61 |
62 |
<ul id="toc"></ul>
63 | ...
64 | <script type="text/javascript">
65 | $("#toc").toc({content: "div.container", headings: "h2,h3,h4"});
66 | </script>
67 |
68 |
Options
69 |
70 |
<ul data-toc="content" data-toc-headings="headings"></ul>
71 |
72 |
$(...).toc({content: "body", headings: "h1,h2,h3"});
73 |
74 |
The plugin has two options:
75 |
76 |
77 | -
78 |
content is a selector where the plugin will look for headings to build up
79 | the TOC. The default value is "body".
80 | -
81 |
headings is a string with a comma-separated list of selectors to be used as
82 | headings, in the order which defines their relative hierarchy level. The default value
83 | of "h1,h2,h3" will select all h1, h2, and
84 | h3 elements to build the TOC, with h1 being a level 1,
85 | h2 a level 2, and so on. You can use any valid list of jQuery selectors;
86 | for example, if you just want h1 tags with a specific class, and no
87 | h3 tags, you could use "h1.title,h2" for this parameter.
88 |
89 |
90 |
91 | In addition, the plugin will create nested lists of the same type (ul or
92 | ol) as the element that it is called on.
93 |
94 |
Automatic ID generation
95 |
96 |
97 | The plugin generates hash-links to the headings on the page, to allow users to jump to the
98 | heading by clicking in the generated table of contents. This feature requires that the
99 | headings have IDs assigned; if they do not, the plugin will generate and assign IDs
100 | automatically.
101 |
102 |
The generated IDs are based on the text inside the headings, and uses two simple rules:
103 |
104 |
105 | -
106 | Space characters are converted to underscores. Multiple spaces are replaced with a
107 | single underscore.
108 | - If the ID already exists, a suffix like "_1", "_2", etc. is tried till we get a unique
109 | ID.
110 |
111 |
112 |
113 | For example, a heading like <h2>Heading 2.1</h2> will get the ID
114 | Heading_2.1.
115 |
116 |
Alternatives
117 |
118 |
119 | If you're looking for a jQuery plugin that does more than just generate a minimal table of
120 | contents, the project wiki lists
121 | some more plugins.
122 |
123 |
License
124 |
125 |
126 | Licensed under the Apache License,
127 | version 2.0.
128 |
129 |
Credits
130 |
131 |
Created by Nikhil Dabas.
132 |