Barra de control principal

La barra de control principal es el área rectangular de los sistemas de escritorio y las tabletas que contienen todos los controles de interfaz de usuario (excepto los botones de página grande) disponibles para el visor de búsqueda en catálogos electrónicos.

En los teléfonos móviles, aún conserva los botones Miniaturas, Tabla de contenido, Descargar, Imprimir, Favoritos, Compartir en redes sociales, Pantalla completa y Cerrar. Sin embargo, los botones Primera página y Última página y el indicador de página se eliminan de la barra de control principal y se agregan a la barra de control secundaria en su lugar. De forma predeterminada, la barra de control principal se muestra en la parte superior del área del visor en sistemas de escritorio y teléfonos móviles, y se mueve a la parte inferior del área del visor en tabletas. Siempre se necesita toda la anchura del visor disponible. Es posible cambiar el color, la altura y la posición vertical en el CSS en relación con el contenedor del visor.

El aspecto de la barra de control principal se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7controlbar

CSS, propiedad

Descripción

parte superior

Posición desde la parte superior del visor.

parte inferior

Posición desde la parte inferior del visor.

height

Altura de la barra de control principal.

background-color

Color de fondo de la barra de control principal.

Ejemplo : para configurar una barra de control principal gris de 36 píxeles de alto y situada en la parte superior del contenedor del visor.

.s7ecatalogsearchviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

La barra de control principal admite una función de desplazamiento opcional. Se activa si la anchura del visor es demasiado pequeña y no hay espacio suficiente para ajustar todos los botones preestablecidos en la barra de control. En este caso, aparece un botón de flecha con dos estados en el lado derecho de la barra de control. Al tocar o hacer clic en este botón, se desplazan todos los elementos de la barra de control a la izquierda o a la derecha, según el estado del botón de desplazamiento. El caso de uso principal de esta función son los dispositivos móviles con pantallas pequeñas en orientación vertical.

La función de desplazamiento está activada para la barra de control principal y está desactivada para la barra de control secundaria. La función se activa y desactiva con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

CSS, propiedad

Descripción

position

Cuando se establece en estática , la función de desplazamiento se desactiva.

Establezca esta propiedad en absoluto para habilitar la función de desplazamiento.

El botón de desplazamiento se agrega a un elemento de contenedor especial que coloca el botón correctamente y le permite aplicar un estilo al área alrededor del botón distinto del resto del fondo de la barra de control en caso de que la altura del botón de desplazamiento sea menor que la altura de la barra de control.

El aspecto de este contenedor de botón de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSS, propiedad

Descripción

width

Normalmente debe ser igual o mayor que el ancho del propio botón de desplazamiento.

background-color

Color de fondo del contenedor.

Puede cambiar el tamaño y el aspecto del propio botón de desplazamiento mediante CSS.

El aspecto de este botón se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSS, propiedad

Descripción

width

Ancho del botón.

height

Altura del botón.

background-image

Imagen que se muestra para un estado de botón determinado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite los selectores de atributos state y selected, que pueden utilizarse para aplicar diferentes apariencias a diferentes estados de botón. En particular, state="selected" corresponde al estado del botón de desplazamiento inicial cuando es posible desplazar el contenido de la barra de control hacia la izquierda; state="default" corresponde al estado cuando el contenido se desplaza hasta la izquierda y el botón de desplazamiento sugiere devolverlo al estado inicial.

La información de objeto 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 habilitar la función de desplazamiento en la barra de control principal para teléfonos móviles, y configurar un botón de desplazamiento de 64 x 64 píxeles que muestre una imagen diferente para cada uno de los 4 estados de botón diferentes cuando se seleccione o no:

.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

En esta página