Descripción

El componente UCA TOC (Tabla de Contenidos) permite crear un índice de enlaces para una página, y así poder referenciar diferentes secciones dentro de una página de contenido largo.

Modo de Uso

El componente se basa en crear primero “marcas” en diferentes secciones de la página para después apuntar a cada uno de ellas desde el índice o tabla de contenidos.

Para crear las “marcas” hay que editar la página en modo “HTML”, e insertar el siguiente código en cada una de las secciones que se desee referenciar:

<a name="nombreSeccion"></a>

Cada una de las “marcas” así indicadas con su correspondiente nombre (sin espacios ni acentos) será la que posteriormente se podrá referenciar desde los elementos del índice, y al que por tanto se dirigirá el usuario cuando pulse en el correspondiente enlace del índice.

Una vez creados las marcas, para crear la tabla de contenidos bastará con introducir dos tipos de shortcodes: toc y tocitem.

▶ toc: es el elemento que englobará a cada uno de los enlaces del índice

• Campo id: Título que se mostrará en la tabla de contenidos

[toc id="Tabla de contenidos"]

▶ tocitem: cada uno de los enlaces que formarán parte del índice

• Campo level: Nivel (1, 2, o 3) de anidamiento del enlace
• Campo title: Título que se mostrará en la tabla de contenidos
• Campo ref: “Marca” a la que apuntará el elemento del índice

[tocitem level="1" title="Modo de Uso" ref="nombreSeccion"]

Ejemplo

A continuación se muestra un ejemplo de tabla de contenidos operativo, si pulsa cada una de las opciones se colocará en la correspondiente sección de la presente página

Típicamente se colocará en la parte inicial de la página, para que el usuario pueda “saltar” a la sección que le interese.

El ejemplo anterior se obtiene a partir del siguiente código:

[toc id="Ejemplo Índice"]
[tocitem level="1" title="Descripción" ref="descripcion"]
[tocitem level="1" title="Modo de Uso" ref="modoUso"]
[tocitem level="2" title="Elemento TOC" ref="toc"]
[tocitem level="2" title="Elemento TOCITEM" ref="tocitem"]
[tocitem level="1" title="Ejemplo" ref="ejemplo"]
[tocitem level="2" title="Código del ejemplo" ref="ejemplo_cod"]
[tocitem level="2" title="Marcas del ejemplo" ref="ejemplo_marcas"]
[/toc]

Habiendo antes introducido las siguientes marcas en las diferentes secciones de la presente página:

<a name="descripcion"></a>
<a name="modoUso"></a>
<a name="toc"></a>
<a name="tocitem"></a>
<a name="ejemplo"></a>
<a name="ejemplo_cod"></a>
<a name="ejemplo_marcas"></a>