Thumbnails button

Selecionar ou tocar nesse botão redefine o 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.

CSS properties of the main viewer area

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

.s7ecatalogviewer .s7thumbnailpagebutton

CSS property

Descrição

margin-top

O deslocamento da parte superior da barra de controle.

margin-left

The distance to the next button on the left, or the left side of the control bar, if it is the first button in a row.

width

Largura do botão.

height

Height of the button.

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.

See also CSS Sprites .

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 o botão de miniaturas que tem 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.

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

Nesta página