Botão PlayPause

O botão Reproduzir/Pausar permite que o usuário pause ou retome o comportamento de reprodução automática do carrossel.

O botão é visível somente se o parâmetro CarouselViewer.autoplay estiver definido como 1; caso contrário, estará oculto. É possível dimensionar, usar a capa e posicionar esse botão em relação à barra de controle que o contém, usando o CSS.

Propriedades CSS da área principal do visualizador

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

.s7carouselviewer .s7playpausebutton

Propriedade CSS

Descrição

top

Posicione a partir da parte superior da borda do visualizador.

right

Posição à direita da borda do visualizador.

left

Posição à esquerda do visualizador.

bottom

Posição a partir da parte inferior da borda do visualizador.

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 .

cursor

Tipo de cursor.

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar skins diferentes a estados de botão diferentes.

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.

Por exemplo, suponha que você deseja configurar um botão de pausa de reprodução com 28 x 28 pixels. Você deseja que o botão seja posicionado 17 pixels da parte inferior e 12 pixels da borda esquerda do visualizador. E você quer que ele exiba uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.

.s7carouselviewer .s7playpausebutton {
bottom:17px;
left:12px;
width:28px;
height:28px;
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='up'] {
  background-image:url(images/playBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}

Nesta página