La tabla de contenido es un botón situado en la barra de control principal. Cuando se activa, aparece un panel desplegable con una lista de índices y etiquetas de página.
En función de la configuración, la lista puede contener todas las páginas que estén presentes en el catálogo o solo aquellas páginas que tengan etiquetas explícitas definidas. En los sistemas de escritorio, si la lista es más larga que el espacio de la pantalla disponible, se muestra una barra de desplazamiento a la derecha.
La posición y el tamaño del botón de la tabla de contenido en la interfaz de usuario del visor se controlan con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents
Propiedades CSS de la tabla de contenido
margin-top |
Desplazamiento desde la parte superior de la barra de control. |
margin-left |
Distancia al botón siguiente de la izquierda o del lado izquierdo de la barra de control, si es el primer botón de una fila. |
width |
Ancho del botón de la tabla de contenido. |
height |
Altura del botón de tabla de contenido. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte también Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo : para configurar un botón de tabla de contenido que se posicione a 4 píxeles de la parte inferior y a 43 píxeles de la izquierda de la barra de control principal. El tamaño es de 28 x 28 píxeles y se muestra una imagen diferente para cada uno de los cuatro estados de botones diferentes:
.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}
El aspecto del panel desplegable se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7panel
Propiedades CSS del panel desplegable
background-color |
Color de fondo del panel desplegable. |
margin |
Desplazamiento interno entre los límites del panel y el contenido. |
box-Shadow |
Sombra paralela alrededor del panel. |
No es posible controlar el tamaño o la posición del panel desplegable desde CSS; el componente gestiona su diseño mediante programación.
Ejemplo: configure un panel desplegable que tenga un fondo negro semitransparente, un margen de 5 píxeles alrededor del contenido y una sombra de colocación:
.s7ecatalogviewer .s7tableofcontents .s7panel {
background-color: rgba(0, 0, 0, 0.5);
margin: 5px;
box-shadow: 2px 2px 3px #c0c0c0;
}
El aspecto del elemento individual se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item
Propiedades CSS del elemento
font-family |
Nombre de la fuente. |
font-size |
Tamaño de fuente. |
height |
Altura del elemento. |
relleno |
Margen interno. |
El elemento de lista desplegable es compatible con la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a los estados de elemento seleccionado y al pasar el ratón por encima.
Ejemplo: configure un elemento desplegable con una fuente Helvetica® de 14 píxeles y una altura de 19 píxeles. Un elemento tiene un fondo gris oscuro al pasar el ratón por encima y un fondo gris claro al seleccionarlo:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}
Un elemento que muestra el índice de página se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index
Propiedades CSS del índice de página
ancho mínimo |
Ancho mínimo del elemento. |
max-width |
Ancho máximo del elemento. |
relleno-derecha |
Distancia entre el índice de página y la etiqueta de página. |
Es posible ocultar el índice de página por completo configurando display:none
para el s7index
clase CSS.
Ejemplo 1: Configure un índice de página con una anchura mínima de 40 píxeles, una anchura máxima de 70 píxeles y un margen de 5 píxeles en el lado derecho:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}
Ejemplo 2: ocultar índice de página:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
display: none;
}
La etiqueta de página se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7label
Propiedades CSS de la etiqueta de página
ancho mínimo |
Ancho mínimo del elemento. |
max-width |
Ancho máximo del elemento. |
Ejemplo: configure un índice de página con una anchura mínima de 40 píxeles y una anchura máxima de 240 píxeles:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}
Si hay más elementos que se pueden ajustar verticalmente en el panel desplegable y el sistema es un escritorio, el componente procesa una barra de desplazamiento vertical en el lado derecho del panel. El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar
Propiedades CSS de la barra de desplazamiento
width |
Ancho de la barra de desplazamiento. |
parte superior |
Desplazamiento vertical de la barra de desplazamiento desde la parte superior del área del panel. |
parte inferior |
Desplazamiento vertical de la barra de desplazamiento desde la parte inferior del área del panel. |
derecha |
Desplazamiento horizontal de la barra de desplazamiento desde el borde derecho del área del panel. |
Ejemplo: configure una barra de desplazamiento de 28 píxeles de ancho y que no tenga margen para el área superior, derecha o inferior del panel:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:28px;
}
La barra de desplazamiento es el área entre los botones de desplazamiento superior e inferior. El componente establece automáticamente la posición y la altura de la pista. El seguimiento se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack
Propiedades CSS de la pista de desplazamiento
width |
Ancho de la pista. |
background-color |
El color de fondo de la pista. |
Ejemplo: configure una pista de barra de desplazamiento con una anchura de 28 píxeles y un fondo gris semitransparente:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
La barra de desplazamiento se mueve verticalmente dentro del área de la pista de desplazamiento. Su posición vertical está controlada por la lógica del componente. Sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido. Puede configurar la altura de la miniatura y otros aspectos con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb
Propiedades CSS de la barra de desplazamiento
width |
La anchura del pulgar. |
height |
La altura del pulgar. |
relleno superior |
El margen vertical entre la parte superior de la pista. |
relleno inferior |
El margen vertical entre la parte inferior de la pista. |
imagen de fondo |
Imagen que se muestra para un estado de pulgar determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte también Sprites CSS . |
La miniatura admite el state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a la variable up
, down
, over
y disabled
estados del pulgar.
Ejemplo: configure un control de barra de desplazamiento de 28 x 45 píxeles, tenga 10 márgenes de píxeles en la parte superior e inferior y tenga distintas ilustraciones para cada estado:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
El aspecto de los botones de desplazamiento superior e inferior se controla con los siguientes selectores de clase CSS:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton
No es posible colocar los botones de desplazamiento mediante CSS top
, left
, bottom
y right
propiedades; en su lugar, la lógica del visor los coloca automáticamente.
Propiedades CSS del botón de desplazamiento hacia arriba y hacia abajo
width |
Ancho del botón. |
height |
Altura del botón. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte también Sprites CSS . |
El botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a la variable up
, down
, over
y disabled
estados de botón.
La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo: configure botones de desplazamiento de 28 x 32 píxeles con distintas ilustraciones para cada estado:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}