Page Comparison

{div:class=} {anchor:top} The Levels subcomponent is used by [Table of Contents] to render the generated list of links to headers into a template. *Do not use this component directly.* The information on this page should be use when customizing Table of Contents. *See Also* [Table of Contents] [UI Enhancer] {div2:class=summary-table} ||Supported Events |_none_| ||Methods| _none_ | ||[#Options] | {{[#model]}}\\ An array of information about the headings in the document\\ \\ {{[#produceTree]}}\\ A function that will return a [Renderer Component Tree|Renderer Component Trees].\\ \\ {{[#rendererFnOptions]}}\\ Options passed on to the renderer function.\\ \\ {{[#rendererOptions]}}\\ Options passed on to the renderer.\\ \\ {{[#repeatingSelectors]}}\\ An array of selector names for elements that will be repeated.\\ \\ {{[#resources]}}\\ Information about resources that need to be loaded.\\ \\ *{{selectors}}*\\ See below.\\ \\ | ||[#Selectors]| {{[#level1 through level6]}}\\ Identify the elements in the template for the levels.\\ \\ {{[#items1 through items6]}}\\ Identify the elements in the template for the items at each level.\\ \\ {{[#link1 through link6]}}\\ Identify the elements in the template for the links to the headings.| {div2} h2. Options {span:class=back-to-top}[back to top|#top]{span} {include:_options intro} h3. model {div2:class=api-table} ||Description|An object containing an array of information about the headings in the document. It should have the following form:\\ {code:javascript}

Wiki Markup

Div

class	component-api-page

Anchor

	top
	top

The Levels subcomponent is used by Table of Contents to render the generated list of links to headers into a template.

Do not use this component directly. The information on this page should be use when customizing Table of Contents.

See Also
Table of Contents
UI Enhancer

Div

class	summary-table

Supported Events	none
Methods	none
#Options	`#model` An array of information about the headings in the document `#produceTree` A function that will return a Renderer Component Tree. `#rendererFnOptions` Options passed on to the renderer function. `#rendererOptions` Options passed on to the renderer. `#repeatingSelectors` An array of selector names for elements that will be repeated. `#resources` Information about resources that need to be loaded. `selectors` See below.
#Selectors	`#level1 through level6` Identify the elements in the template for the levels. `#items1 through items6` Identify the elements in the template for the items at each level. `#link1 through link6` Identify the elements in the template for the links to the headings.

Options

Span

class	back-to-top

back to top

Include Page

	_options intro
	_options intro

model

Div

class	api-table

Description

An object containing an array of information about the headings in the document. It should have the following form:

Code Block

	javascript
	javascript

{
    heading: [{
        text: <heading text>,
        url: <link to anchor associated with the heading>
        headings: [<array of heading info for subheadings>]
    },
    ...
    ]
}

{code}\\ By

By default,

this

information

is

generated

by

the

component

as

part

of

its

initialization

process.

| ||Default| {code:javascript}

Default

Code Block

	javascript
	javascript

{
    heading: []
}

{code}| {div2} h3. produceTree {div2:class=api-table} ||Description|A function that will return a [Renderer Component Tree|Renderer Component Trees] for the table of contents.| ||Default| {{

produceTree

Div

class	api-table

Description	A function that will return a Renderer Component Tree for the table of contents.
Default	`"fluid.tableOfContents.levels.produceTree"`

}} | ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

produceTree: "customTreeProducerFn"

{code} | ||See also| | {div2} h3. rendererFnOptions {div2:class=api-table} ||Description|This option is an object containing options that will be passed on to the renderer function created for this component.| ||Default| {code:javascript}

See also

rendererFnOptions

Div

class	api-table

Description

This option is an object containing options that will be passed on to the renderer function created for this component.

Default

Code Block

	javascript
	javascript

{
    noexpand: true
}

{code} | ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

rendererFnOptions: {
    noexpand: true
}

{code} | ||See also| [

See also

Renderer-bearing

Components] | {div2} h3. rendererOptions {div2:class=api-table} ||Description|This option is an object containing options that will be passed on to the Renderer.|| ||Default| {code:javascript}

Components

rendererOptions

Div

class	api-table

Description

This option is an object containing options that will be passed on to the Renderer.

Default

Code Block

	javascript
	javascript

{
    debugMode: false
}

{code} | ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

rendererOptions: {
    debugMode: true
}

{code} | ||See also| [

See also

Renderer-bearing

Components]| {div2} h3. repeatingSelectors {div2:class=api-table} ||Description|This option is an array of the selector names that identify elements in the template that will be replicated by the renderer as needed, based on the data being rendered. | ||Default| {code:javascript}

Components

repeatingSelectors

Div

class	api-table

Description

This option is an array of the selector names that identify elements in the template that will be replicated by the renderer as needed, based on the data being rendered.

Default

Code Block

	javascript
	javascript

["level1", "level2", "level3", "level4", "level5", "level6",
 "items1", "items2", "items3", "items4", "items5", "items6"]

{code} | ||Example| | ||See also| | {div2} h3. resources {div2:class=api-table} ||Description|An object describing any resources that need to be loaded.| ||Default| {code:javascript}

Example

See also

resources

Div

class	api-table

Description

An object describing any resources that need to be loaded.

Default

Code Block

	javascript
	javascript

{
    template: {
        forceCache: true,
        url: "../html/TableOfContents.html"
    }
}

{code} | ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

resources: {
    template: {
        url: "../templates/CustomToCTemplate.html"
    }
}

{code} | ||See also| | {div2} h2. Selectors {span:class=

See also

Selectors

Span

class	back-to-top

}[

back

to

top|#top]{span} {include:_selectors intro} h3. level1 through level6 {div2:class=api-table} ||Description|These selectors identify the elements in the template that serve as containers for the different levels of header links. In the default template, these selectors identify {{<ul>}} elements. | ||Default| {{

top

Include Page

	_selectors intro
	_selectors intro

level1 through level6

Div

class	api-table

Description	These selectors identify the elements in the template that serve as containers for the different levels of header links. In the default template, these selectors identify `<ul>` elements.
Default	`".flc-toc-levels-level1"`

}}

through

{{

".flc-toc-levels-level6"

}}| ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

selectors: {
    level1: "ol.level1",
    level2: "ol.level2",
    level3: "ol.level3",
    ...
}

{code} | {div2} h3. items1 through items6 {div2:class=api-table} ||Description|These selectors identify the elements in the template that serve as containers for the links at each level. In the default template, these selectors identify {{<li>}} elements. | ||Default| {{

items1 through items6

Div

class	api-table

Description	These selectors identify the elements in the template that serve as containers for the links at each level. In the default template, these selectors identify `<li>` elements.
Default	`".flc-toc-levels-items1"`

}}

through

{{

".flc-toc-levels-items6"

}}| ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

selectors: {
    items1: ".level1 div",
    items2: ".level2 div",
    items3: ".level3 div",
    ...
}

{code} | {div2} h3. link1 through link6 {div2:class=api-table} ||Description|These selectors identify the link elements at each level. In the default template, these selectors identify {{<a>}} elements. | ||Default| {{

link1 through link6

Div

class	api-table

Description	These selectors identify the link elements at each level. In the default template, these selectors identify `<a>` elements.
Default	`".flc-toc-levels-link1"`

}}

through

{{

".flc-toc-levels-link6"

}}| ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

selectors: {
    link1: "a.tocLinks"

}{code} | {div2}

{div

Versions Compared

Old Version 2

New Version 3

Key

Options

model

produceTree

rendererFnOptions

rendererOptions

repeatingSelectors

resources

Selectors

level1 through level6

items1 through items6

link1 through link6