Botão Miniaturas

Selecionar esse botão redefine o alternador do visualizador entre a exibição principal e as miniaturas. Esse botão aparece na barra de controle principal. Você pode dimensionar, aplicar a capa e posicionar esse botão usando o CSS.

Propriedades CSS da área principal do visualizador

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é ao botão seguinte à esquerda ou à esquerda da barra de controle, se este botão for o primeiro em uma linha.

width

Largura do botão.

altura

Altura do botão.

imagem de fundo

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

posição de fundo

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

Consulte também Sprites CSS .

OBSERVAÇÃO

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

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

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

.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