Il pulsante Riproduci/Pausa consente all’utente di sospendere o riprendere il comportamento di riproduzione automatica carosello.
Il pulsante è visibile solo se il parametro CarouselViewer.autoplay
è impostato su 1
; altrimenti, è nascosto. È possibile ridimensionare, applicare uno skin e posizionare questo pulsante, rispetto alla barra di controllo che lo contiene, utilizzando CSS.
Proprietà CSS dell’area visualizzatore principale
L’aspetto del pulsante è controllato con il seguente selettore di classe CSS:
.s7carouselviewer .s7playpausebutton
Proprietà CSS |
Descrizione |
---|---|
top |
Posizione dalla parte superiore del bordo del visualizzatore. |
right |
Posizione da destra del bordo del visualizzatore. |
sinistra |
Posizione a sinistra del visualizzatore. |
bottom |
Posizione dal fondo del bordo del visualizzatore. |
width |
Larghezza del pulsante. |
height |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedere anche Spriti CSS . |
cursore |
Tipo di cursore. |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .
Ad esempio, si supponga di voler impostare un pulsante di pausa di riproduzione di 28 x 28 pixel. Il pulsante deve essere posizionato a 17 pixel dal basso e a 12 pixel dal bordo sinistro del visualizzatore. Inoltre, se selezionato o non selezionato, viene visualizzata un’immagine diversa per ciascuno dei quattro stati del pulsante.
.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);
}