Lo strumento di incorporamento della condivisione è costituito da un pulsante aggiunto al pannello Condivisione social e dalla finestra di dialogo modale visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento Condivisione social.
L’aspetto del pulsante di incorporamento della condivisione è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embedshare
Proprietà CSS dello strumento di condivisione da incorporare
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
background-image |
Immagine visualizzata per un determinato stato del pulsante. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
È possibile rimuovere il pulsante dal pannello Condivisione social impostando display:none
proprietà CSS nella relativa classe CSS.
La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un pulsante di condivisione da incorporare di 28 x 28 pixel e visualizzare un'immagine diversa per ciascuno dei quattro stati dei pulsanti:
.s7videoviewer .s7embedshare {
width:28px;
height:28px;
}
.s7videoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7videoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7videoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7videoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}
La sovrapposizione di sfondo che copre la pagina web quando la finestra di dialogo è attiva è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7backoverlay
Proprietà CSS della sovrapposizione di sfondo
opacità |
Opacità sovrapposizione sfondo. |
background-color |
Colore di sovrapposizione sfondo. |
Esempio: per impostare la sovrapposizione di sfondo su grigio con opacità 70%:
.s7videoviewer .s7embeddialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo dei sistemi desktop e occupa l’intera area della pagina web sui dispositivi touch. In tutti i casi, il posizionamento e il ridimensionamento della finestra di dialogo vengono gestiti dal componente. La finestra di dialogo è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialog
Proprietà CSS della finestra di dialogo
border-radius |
Raggio del bordo della finestra di dialogo, nel caso in cui la finestra di dialogo non occupi l'intero browser. |
background-color |
Colore di sfondo della finestra di dialogo. |
width |
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l'intera finestra del browser (questa modalità è preferita sui dispositivi touch). |
height |
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l'intera finestra del browser (questa modalità è preferita sui dispositivi touch). |
Esempio: per impostare la finestra di dialogo in modo da utilizzare l'intera finestra del browser e avere uno sfondo bianco sui dispositivi touch:
.s7videoviewer .s7touchinput .s7embeddialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
L'intestazione della finestra di dialogo è costituita da un'icona, un testo del titolo e un pulsante di chiusura. Il contenitore di intestazione è controllato con
.s7videoviewer .s7embeddialog .s7dialogheader
Proprietà CSS dell’intestazione della finestra di dialogo
riempimento |
Spaziatura interna per contenuto intestazione. |
L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato da
.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline
Proprietà CSS della riga di dialogo
riempimento |
Spaziatura interna per l'icona e il titolo dell'intestazione |
L’icona dell’intestazione è controllata dal seguente selettore di classe CSS
.s7videoviewer .s7embeddialog .s7dialogheadericon
Proprietà CSS dell'icona dell'intestazione della finestra di dialogo
width |
Larghezza icona. |
height |
Altezza icona. |
background-image |
Immagine icona. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Il titolo dell’intestazione è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogheadertext
Proprietà CSS del testo dell’intestazione della finestra di dialogo
font-weight |
Spessore font. |
font-size |
Altezza carattere. |
font-family |
Famiglia di caratteri. |
riempimento |
Spaziatura interna testo. |
Il pulsante Chiudi è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7closebutton
Proprietà CSS del del pulsante Chiudi
top |
Posizione verticale del pulsante rispetto al contenitore di intestazione. |
destra |
Posizione del pulsante orizzontale relativa al contenitore di intestazione. |
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
riempimento |
Spaziatura interna del pulsante. |
background-image |
Immagine pulsante per ogni stato. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
È possibile localizzare la descrizione comando del pulsante Chiudi e il titolo della finestra di dialogo. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare l’intestazione della finestra di dialogo con spaziatura interna, icona 24 x 14 pixel, titolo in grassetto a 16 punti. Infine, un pulsante di chiusura di 28 x 28 pixel, posizionato due pixel dalla parte superiore e due pixel dalla parte destra del contenitore della finestra di dialogo:
.s7videoviewer .s7embeddialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7embeddialog .s7dialogheadericon {
background-image: url("images/sdk/dlgembed_cap.png");
height: 14px;
width: 24px;
}
.s7videoviewer .s7embeddialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7embeddialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7embeddialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Il piè di pagina della finestra di dialogo è costituito dal pulsante Annulla. Il contenitore piè di pagina è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogfooter
Proprietà CSS del piè di pagina della finestra di dialogo
bordo |
Bordo che consente di separare visivamente il piè di pagina dal resto della finestra di dialogo. |
Il piè di pagina contiene un contenitore interno che mantiene il pulsante. Viene controllata con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer
Proprietà CSS del contenitore del pulsante della finestra di dialogo
riempimento |
Spaziatura interna tra piè di pagina e pulsante. |
Il pulsante Seleziona tutto è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogactionbutton
Il pulsante è disponibile solo sui sistemi desktop.
Proprietà CSS del pulsante Seleziona tutto
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
color |
Colore testo pulsante per ogni stato. |
background-color |
Colore di sfondo pulsante per ogni stato. |
Il pulsante Seleziona tutto supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
Il pulsante Annulla è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogcancelbutton
Proprietà CSS del pulsante Annulla della finestra di dialogo
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
color |
Colore testo pulsante per ogni stato. |
background-color |
Colore di sfondo pulsante per ogni stato. |
Il pulsante Annulla supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
Inoltre, entrambi i pulsanti condividono la stessa classe CSS che può contenere impostazioni CSS identiche a quelle degli altri pulsanti della finestra di dialogo:
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button
Proprietà CSS del pulsante
font-weight |
Spessore font pulsante. |
font-size |
Dimensione font pulsante. |
font-family |
Famiglia font pulsante. |
line-height |
Altezza del testo all'interno del pulsante. Influisce sull'allineamento verticale. |
box-shadow |
Ombra esterna. |
margine destro |
Margine pulsante destro. |
Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un piè di pagina della finestra di dialogo con un pulsante Annulla 64 x 34, con un colore del testo e un colore di sfondo diversi per ogni stato del pulsante:
.s7videoviewer .s7embeddialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
L’area della finestra di dialogo principale (tra l’intestazione e il piè di pagina) contiene il contenuto della finestra di dialogo e il pannello di scorrimento a destra. In tutti i casi in cui il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area della finestra di dialogo principale è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogviewarea
Proprietà CSS della finestra di dialogo area di visualizzazione
height |
Altezza della finestra di dialogo principale. Deve essere specificato solo quando la finestra di dialogo funziona in modalità desktop. Non è applicabile quando la finestra di dialogo viene ridimensionata per occupare l'intera finestra del browser. |
background-color |
Colore di sfondo dell'area della finestra di dialogo principale. |
margine |
Margine esterno. |
Esempio: per impostare un'area della finestra di dialogo principale di 300 pixel, avere un margine di dieci pixel e utilizzare uno sfondo bianco:
.s7videoviewer .s7embeddialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Tutto il contenuto del modulo (come etichette e campi di input) si trova all’interno di un contenitore controllato con
.s7videoviewer .s7embeddialog .s7dialogbody
Se l’altezza del contenitore risulta maggiore dell’area della finestra di dialogo principale, il componente abilita automaticamente uno scorrimento verticale.
Proprietà CSS del del corpo della finestra di dialogo
riempimento |
Spaziatura interna. |
Esempio: per impostare il contenuto del modulo su una spaziatura di dieci pixel:
.s7videoviewer .s7embeddialog .s7dialogbody {
padding: 10px;
}
Tutte le etichette statiche nel modulo della finestra di dialogo sono controllate da
.s7videoviewer .s7embeddialog .s7dialoglabel
Questa classe non è adatta per controllare la dimensione o la posizione dell'etichetta perché può essere applicata a testi in varie posizioni dell'interfaccia utente del modulo.
Proprietà CSS dell'etichetta della finestra di dialogo.
font-weight |
Spessore font etichetta. |
font-size |
Dimensione font etichetta. |
font-family |
Famiglia font etichetta. |
color |
Colore testo etichetta. |
Le descrizioni comandi delle etichette delle finestre di dialogo possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare tutte le etichette come grigie, in grassetto con un carattere di nove pixel:
.s7videoviewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
La dimensione della copia di testo visualizzata sopra il codice di incorporamento è controllata con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialoginputwide
Proprietà CSS del campo a livello di input della finestra di dialogo
width |
Larghezza campo di input. |
riempimento |
Spaziatura interna. |
Esempio: per impostare una copia di testo larga 430 pixel e con una spaziatura di dieci pixel nella parte inferiore:
.s7videoviewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Il codice di incorporamento viene racchiuso nel contenitore e controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
width |
Larghezza del contenitore del codice di incorporamento. |
bordo |
Bordo intorno al contenitore del codice di incorporamento. |
riempimento |
Spaziatura interna. |
Esempio: per impostare un bordo grigio di un pixel attorno al testo del codice da incorporare, impostalo con una larghezza di 430 pixel e una spaziatura di dieci pixel:
.s7videoviewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
Il testo effettivo del codice di incorporamento è controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
ritorno a capo automatico |
Stile a capo automatico. |
Esempio: per impostare il codice incorporato in modo che venga utilizzato break-word
ritorno a capo automatico:
.s7videoviewer .s7embeddialog .s7dialogmessage {
word-wrap: break-word;
}
L’etichetta della dimensione dell’incorporamento e il menu a discesa si trovano nella parte inferiore della finestra di dialogo e vengono inseriti in un contenitore controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel
Proprietà CSS del pannello dimensioni di incorporamento della finestra di dialogo
riempimento |
Spaziatura interna. |
Esempio: per impostare un pannello di dimensioni da incorporare con dieci pixel di spaziatura interna:
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel {
padding: 10px;
}
Le dimensioni e l’allineamento dell’etichetta delle dimensioni di incorporamento sono controllati con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel
Proprietà CSS del pannello dimensioni di incorporamento della finestra di dialogo
Allineamento verticale |
Allineamento verticale delle etichette. |
width |
Larghezza etichetta. |
Esempio: per impostare l’etichetta della dimensione di incorporamento in modo che sia allineata in alto e larga 80 pixel:
.s7videoviewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
La larghezza della casella combinata Dimensione incorporamento è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7combobox
Proprietà CSS della casella combinata
width |
Larghezza casella combinata. |
La casella combinata supporta expanded
selettore di attributi con valori possibili di true
e false
. Il true
value (valore) viene utilizzato quando la casella combinata visualizza una delle dimensioni di incorporamento predefinite, pertanto dovrebbe occupare tutta la larghezza disponibile. Il false
il valore viene utilizzato quando nella casella combinata è selezionata l'opzione dimensione personalizzata, quindi deve ridursi per consentire spazio per i campi di input personalizzati per larghezza e altezza.
Esempio: per impostare la casella combinata Dimensione incorporamento su una larghezza di 300 pixel quando si visualizza un elemento predefinito e su una larghezza di 110 pixel quando si visualizza una dimensione personalizzata:
.s7videoviewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7videoviewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
L’altezza del testo della casella combinata è definita da un elemento interno speciale ed è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext
Proprietà CSS del testo della casella combinata
height |
Altezza testo casella combinata. |
Esempio - per impostare su 40 pixel l'altezza del testo della casella combinata delle dimensioni di incorporamento:
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
La casella combinata ha un pulsante "a discesa" a destra ed è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton
Proprietà CSS del pulsante Casella combinata
top |
Posizione del pulsante verticale all'interno della casella combinata. |
destra |
Posizione orizzontale del pulsante all'interno della casella combinata. |
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
background-image |
Immagine pulsante per ogni stato. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
Esempio: per impostare un pulsante "a discesa" su 28 x 28 pixel e avere un’immagine separata per ogni stato:
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
width:28px;
height:28px;
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
Il pannello con l’elenco delle dimensioni di incorporamento visualizzate all’apertura della casella combinata è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7comboboxdropdown
Le dimensioni e la posizione del pannello sono controllate dal componente. Non è possibile modificarlo tramite CSS.
Proprietà CSS del menu a discesa della casella combinata
bordo |
Bordo del pannello. |
Esempio: per impostare il pannello della casella combinata su un bordo grigio di un pixel:
.s7videoviewer .s7embeddialog .s7comboboxdropdown {
border: 1px solid #CCCCCC;
}
Un singolo elemento in un pannello a discesa controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dropdownitemanchor
Proprietà CSS dell’ancoraggio elemento a discesa
background-color |
Sfondo elemento. |
Esempio: per impostare l'elemento del pannello della casella combinata su uno sfondo bianco:
.s7videoviewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
Un segno di spunta visualizzato a sinistra dell’elemento selezionato all’interno del pannello della casella combinata controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7checkmark
Proprietà CSS della casella di controllo
width |
Larghezza icona. |
height |
Altezza icona. |
background-image |
Immagine dell'elemento. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Esempio - per impostare l'icona del segno di spunta su 25 x 25 pixel:
.s7videoviewer .s7embeddialog .s7checkmark {
background-image: url("images/sdk/cboxchecked.png");
height: 25px;
width: 25px;
}
Quando nella casella combinata Dimensione incorporamento è selezionata l'opzione "Dimensione personalizzata", nella finestra di dialogo vengono visualizzati due campi di input aggiuntivi a destra per consentire all'utente di immettere una dimensione di incorporamento personalizzata. Tali campi sono racchiusi in un contenitore controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel
Proprietà CSS del pannello delle dimensioni personalizzato della finestra di dialogo
left |
Distanza dalla casella combinata dimensione incorporamento. |
Esempio: per impostare la dimensione personalizzata del pannello dei campi di input su 20 pixel a destra della casella combinata:
.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel {
left: 20px;
}
Ogni campo di input delle dimensioni personalizzate viene racchiuso in un contenitore che esegue il rendering di un bordo e imposta il margine tra i campi. Viene controllata con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogcustomsize
Proprietà CSS della finestra di dialogo dimensione personalizzata
bordo |
Bordo intorno al campo di input. |
width |
Larghezza campo di input. |
margine |
Margine campo di input. |
riempimento |
Spaziatura interna campo di input. |
Esempio: per impostare le dimensioni personalizzate dei campi di input in modo che abbiano un bordo, un margine, una spaziatura interna di un pixel e una larghezza di 70 pixel:
.s7videoviewer .s7embeddialog .s7dialogcustomsize {
border: 1px solid #CCCCCC;
margin-right: 20px;
padding-left: 2px;
padding-right: 2px;
width: 70px;
}
Se è necessario lo scorrimento verticale, la barra di scorrimento viene rappresentata nel pannello accanto al bordo destro della finestra di dialogo, che è controllata dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7dialogscrollpanel
Proprietà CSS del pannello di scorrimento della finestra di dialogo
width |
Larghezza pannello di scorrimento. |
Esempio: per impostare una larghezza di 44 pixel per il pannello di scorrimento
.s7videoviewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
L’aspetto dell’area della barra di scorrimento è controllato dal seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7scrollbar
Proprietà CSS della barra di scorrimento
width |
Larghezza barra di scorrimento. |
top |
Scostamento della barra di scorrimento verticale dalla parte superiore del pannello di scorrimento. |
bottom |
Scostamento della barra di scorrimento verticale dalla parte inferiore del pannello di scorrimento. |
destra |
Scostamento della barra di scorrimento orizzontale dal bordo destro del pannello di scorrimento. |
Esempio: per impostare una barra di scorrimento larga 28 pixel con un margine di otto pixel dall’alto, dal basso e dal destro del pannello di scorrimento:
.s7videoviewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
La traccia della barra di scorrimento è l'area compresa tra i pulsanti di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia. Il brano è controllato con il seguente selettore di classe CSS
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack
Proprietà CSS del brano della barra di scorrimento
width |
Larghezza del binario. |
background-color |
Tracciare il colore di sfondo. |
Esempio: per impostare una traccia della barra di scorrimento larga 28 pixel e con sfondo grigio:
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente. Tuttavia, l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto. L’altezza del pollice e altri aspetti possono essere configurati con il seguente selettore di classe CSS:
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb
Proprietà CSS del cursore della barra di scorrimento
width |
Larghezza miniature. |
height |
Altezza miniature. |
riempimento superiore |
Spaziatura verticale tra la parte superiore del brano. |
padding-bottom |
Spaziatura verticale tra la parte inferiore del brano. |
background-image |
Immagine visualizzata per un determinato stato del pollice. |
Il miniatura supporta state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati miniatura diversi: up
, down
, over
, e disabled
.
Esempio: per impostare una barra di scorrimento di 28 x 45 pixel con un margine di dieci pixel in alto e in basso e un disegno diverso per ciascuno stato:
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
L’aspetto dei pulsanti di scorrimento superiore e inferiore è controllato dai seguenti selettori di classi CSS:
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica di visualizzazione li posiziona automaticamente.
Proprietà CSS dei pulsanti di scorrimento superiore e inferiore
width |
Larghezza pulsante. |
height |
Altezza pulsante. |
background-image |
Immagine visualizzata per un determinato stato del pulsante. |
background-position |
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS. Consulta Spunti CSS . |
Questi pulsanti supportano state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di pulsante diversi: up
, down
, over
, e disabled
.
Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio - per impostare pulsanti di scorrimento di 28 x 32 pixel con grafica diversa per ogni stato:
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}