Div | class | |
---|---|---|
Wiki Markup | ||
{div:class=component-api-page | Wiki Markup | } {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}{ heading: [{ text: <heading text>, url: <link to anchor associated with the heading> headings: [<array of heading info for subheadings>] }, ... ] }{code}\\ By default, this information is generated by the component as part of its initialization process.| ||Default| {code: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| {{"fluid.tableOfContents.levels.produceTree"}} | ||Example| {code: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}{ noexpand: true }{code} | ||Example| {code:javascript}rendererFnOptions: { noexpand: true }{code} | ||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}{ debugMode: false }{code} | ||Example| {code:javascript}rendererOptions: { debugMode: true }{code} | ||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}["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}{ template: { forceCache: true, url: "../html/TableOfContents.html" } }{code} | ||Example| {code:javascript}resources: { template: { url: "../templates/CustomToCTemplate.html" } }{code} | ||See also| | {div2} h2. 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| {{".flc-toc-levels-level1"}} through {{".flc-toc-levels-level6"}}| ||Example| {code: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| {{".flc-toc-levels-items1"}} through {{".flc-toc-levels-items6"}}| ||Example| {code: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| {{".flc-toc-levels-link1"}} through {{".flc-toc-levels-link6"}}| ||Example| {code:javascript}selectors: { link1: "a.tocLinks" }{code} | {div2} {div} |
Page Comparison
Manage space
Manage content
Integrations