Table of Contents API
This documentation applies to v1.3 and earlier. For Table of Contents API information for v1.4 and later, please see the Table of Contents in the new documentation space.
Overview
The Table of Contents component will construct and display a formatted list of links to all headers in a document.
Subcomponent Name: fluid.tableOfContents
Creation
fluid.tableOfContents(container, options);
Parameter
container
The container is a CSS-based selector, single-element jQuery object, or DOM element that contains the headings that are to be included in the Table of Contents. This may typically be the entire document, but could be limited to a part of the document.
options
The options object is an optional collection of key/value pairs that can be used to further configure the Table of Contents, as described below in the fluid:Options section.
This component is in Sneak Peek status
Join the infusion-users mailing list and ask your questions there.
Supported Events
The Table of Contents component fires the following event:
Event |
Type |
Description |
Parameters |
Parameter Description |
---|---|---|---|---|
|
default |
Fires after the table of contents has been rendered. |
|
|
For more information about the Fluid Event System, see Infusion Event System and Events for Component Users.
Methods
These functions are defined on the central that
object returned from the Table of Contents construction function:
that.show();
Shows the table of contents.
that.hide();
Hides the table of contents.
Options
Name |
Description |
Values |
Default |
---|---|---|---|
|
Javascript object containing selectors for various fragments of the Table of Contents component. |
The object may contain any subset of the following keys: |
selectors: { headings: ":header" } |
|
JavaScript object containing listeners to be attached to the supported events. |
Keys in the object are event names, values are functions or arrays of functions. |
|
|
A reference to an HTML template to use in the rendering of the table of contents. |
String |
|
|
An array of element names indicating the HTML elements to be included in the table of contents. The order in the array denotes the level of nesting in the table of contents. |
Array of strings |
|
Dependencies
The Table of Contents dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file:
<script type="text/javascript" src="InfusionAll.js"></script>
Alternatively, the individual file requirements are:
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script> <script type="text/javascript" src="framework/core/js/Fluid.js"></script> <script type="text/javascript" src="framework/core/js/DataBinding.js"></script> <script type="text/javascript" src="framework/core/js/FluidRequests.js"></script> <!-- New in v1.3 --> <script type="text/javascript" src="lib/fastXmlPull/js/fastXmlPull.js"></script> <script type="text/javascript" src="framework/renderer/js/fluidParser.js"></script> <script type="text/javascript" src="framework/renderer/js/fluidRenderer.js"></script> <script type="text/javascript" src="components/tableOfContents/js/TableOfContents.js"></script>