Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

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.

Status

This component is in Sneak Peek status

On This Page
Still need help?

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

afterRender

default

Fires after the table of contents has been rendered.

(node)

node is the div element that was created and which contains the table of contents.

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

selectors

Javascript object containing selectors for various fragments of the Table of Contents component.

The object may contain any subset of the following keys:
   headings

Any values not provided will revert to the default.

selectors: {
    headings: ":header"
}

listeners

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.

See fluid:Supported Events

templateUrl

A reference to an HTML template to use in the rendering of the table of contents.

String

templateUrl: "../html/TableOfContents.html"

levels

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

levels: [fluid:"H1", "H2", "H3", "H4", "H5", "H6"]


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>