Delen van koppeling link-share
Het gereedschap voor delen van koppeling bestaat uit een knop die wordt toegevoegd aan het deelvenster Sociaal delen en het modale dialoogvenster dat wordt weergegeven wanneer het gereedschap wordt geactiveerd. De positie van de knop wordt volledig beheerd met het gereedschap Sociaal delen.
De weergave van de knop voor het delen van koppelingen wordt bepaald door de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkshare
CSS-eigenschappen van het gereedschap voor delen van koppelingen
state
kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.Het is mogelijk de knop uit het deelvenster Sociaal delen te verwijderen door de instelling display:none
CSS-eigenschap in de CSS-klasse.
De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen.
Voorbeeld - om een knop voor het delen van koppelingen in te stellen met een grootte van 28 x 28 pixels en een andere afbeelding weer te geven voor elk van de vier verschillende knopstatussen:
.s7video360viewer .s7linkshare {
width:28px;
height:28px;
}
.s7video360viewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7video360viewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7video360viewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7video360viewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
De achtergrondoverlay die de webpagina bedekt wanneer het dialoogvenster actief is, wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7backoverlay
CSS-eigenschappen van de achtergrondoverlay
Voorbeeld - een achtergrondbedekking instellen die grijs is met een dekking van 70%:
.s7video360viewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Standaard wordt het modale dialoogvenster gecentreerd weergegeven op het scherm op desktopsystemen en neemt het volledige webpaginagebied op aanraakapparaten. In alle gevallen, wordt het plaatsen en het rangschikken van de dialoogdoos beheerd door de component. Het dialoogvenster wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialog
CSS-eigenschappen van het dialoogvenster
Voorbeeld - het dialoogvenster zo instellen dat het volledige browservenster wordt gebruikt en een witte achtergrond heeft op aanraakapparaten:
.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
De koptekst van het dialoogvenster bestaat uit een pictogram, een titeltekst en een sluitknop. De koptekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogheader
CSS-eigenschappen van de koptekst van het dialoogvenster
Het pictogram en de titeltekst zijn ondergebracht in een extra container die wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline
CSS-eigenschappen van de dialoogregel
Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer
.s7video360viewer .s7linkdialog .s7dialogheadericon
CSS-eigenschappen van het pictogram van de koptekst in het dialoogvenster
De titel van de koptekst wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogheadertext
CSS-eigenschappen van de koptekst van het dialoogvenster
Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7closebutton
CSS-eigenschappen van de knop close
state
kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.De knopinfo Sluiten en de titel van het dialoogvenster kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen.
Voorbeeld - Een koptekst voor een dialoogvenster instellen met opvulling, een pictogram van 22 x 12 pixels en een vette titel van 16 punten. En ten slotte een knop Sluiten met 28 x 28 pixels die zich twee pixels van de bovenkant en twee pixels van de rechterkant van de container van het dialoogvenster bevindt:
.s7video360viewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7video360viewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7video360viewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7video360viewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7video360viewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
De voettekst van het dialoogvenster bestaat uit een knop Annuleren. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogfooter
CSS-eigenschappen van de voettekst van het dialoogvenster
De voettekst heeft een binnencontainer die de knop houdt. De klasse wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer
CSS-eigenschappen van de knopcontainer van het dialoogvenster
De knop Alles selecteren wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogactionbutton
De knop is alleen beschikbaar op desktopsystemen.
CSS-eigenschappen van de knop Alles selecteren
state
kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.De knop Annuleren wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogcancelbutton
CSS-eigenschappen van het dialoogvenster Annuleren
state
kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.Bovendien delen beide knoppen dezelfde algemene CSS-klasse die CSS-instellingen kan bevatten die hetzelfde zijn voor andere knoppen in dialoogvensters:
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button
CSS-eigenschappen van de knop
De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen.
Voorbeeld - als u een voettekst in het dialoogvenster wilt instellen met een knop Annuleren van 64 x 34, met tekstkleuren en achtergrondkleuren die verschillend zijn voor elke knopstatus:
.s7video360viewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
Het hoofddialoogvenster (tussen de kop- en voettekst) bevat inhoud van het dialoogvenster. In alle gevallen beheert de component de breedte van dit gebied. Het is niet mogelijk dit in te stellen in CSS. Het hoofddialoogvenster wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogviewarea
CSS-eigenschappen van het weergavegebied van het dialoogvenster
Voorbeeld - als u een gebied in het dialoogvenster wilt instellen dat 300 pixels hoog is, een marge van 10 pixels heeft en een witte achtergrond gebruikt:
.s7video360viewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Alle formulierinhoud - zoals labels en invoervelden - bevindt zich in een container die wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialogbody
CSS-eigenschappen van de hoofdtekst van het dialoogvenster
Voorbeeld - instellen dat formulierinhoud tien pixelopvulling heeft:
.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
Alle statische labels in het dialoogvenster worden beheerd met
.s7video360viewer .s7linkdialog .s7dialoglabel
Deze klasse is niet geschikt voor het bepalen van de grootte of positie van het label, omdat u deze kunt toepassen op tekst in verschillende locaties van de gebruikersinterface van het formulier.
CSS-eigenschappen van het label van het dialoogvenster.
De dialoogvensterlabels kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen.
Voorbeeld - alle labels instellen op grijs, vet met een lettertype van 9 pixels:
.s7video360viewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
De grootte van de tekstkopie die boven op de koppeling wordt weergegeven, wordt bepaald door de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialoginputwide
CSS-eigenschappen van het invoerveld van het dialoogvenster
Voorbeeld - als u de tekstkopie wilt instellen op 430 pixels breed en onderaan een opvulling van 10 pixels hebt:
.s7video360viewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
De koppeling voor delen is ondergebracht in een container en wordt bestuurd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer
CSS-eigenschappen van de invoercontainer van het dialoogvenster
Voorbeeld - als u een grijze rand van één pixel wilt instellen rondom de ingesloten codetekst en als u 9 pixels opvulling wilt gebruiken:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
De koppeling voor delen zelf wordt beheerd met de volgende CSS-klassenkiezer:
.s7video360viewer .s7linkdialog .s7dialoglink
CSS-eigenschappen van het dialoogvenster delen koppeling
Voorbeeld - als u de koppeling voor delen wilt instellen op 450 pixels breed:
.s7video360viewer .s7linkdialog .s7dialoglink {
width: 450px;
}