Botão Miniaturas

Clicar ou tocar nesse botão redefine o visualizador entre a visualização principal e as miniaturas. Esse botão é exibido na barra de controle principal. Você pode dimensionar, exibir e posicionar esse botão usando o CSS.

Propriedades de CSS da área do visualizador principal

A aparência do botão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailpagebutton

Propriedade CSS

Descrição

margem superior

O deslocamento da parte superior da barra de controle.

margem esquerda

A distância até o botão seguinte à esquerda ou ao lado esquerdo da barra de controle, se este for o primeiro botão em uma linha.

width

Largura do botão.

altura

Altura do botão.

background-image

A imagem que é exibida para um determinado estado de botão.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

OBSERVAÇÃO

Este botão suporta os seletores de atributos state e selected, que podem ser usados para aplicar diferentes capas a diferentes estados de botão. Especificamente, selected='true' corresponde ao estado do visualizador quando o modo de miniatura está ativo e selected='false' corresponde ao estado padrão com a visualização principal.

A dica de ferramenta do botão pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.

Exemplo - para configurar o botão de miniaturas com 28 x 28 pixels, posicionado 4 pixels da parte inferior e 5 pixels da borda esquerda da barra de controle principal e exibe uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não.

.s7ecatalogsearchviewer .s7thumbnailpagebutton{ 
margin-top: 4px; 
margin-left: 5px; width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='up'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='over'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='down'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='up'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='over'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='down'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png); 
}

Nesta página