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:

.s7videoviewer .s7linkshare

CSS-eigenschappen van het gereedschap voor delen van koppelingen

width
Knopbreedte.
height
Hoogte van knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt de 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 voor meer informatie .

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:

.s7videoviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7videoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7videoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7videoviewer .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:

.s7videoviewer .s7linkdialog .s7backoverlay

CSS-eigenschappen van de achtergrondoverlay

dekking
Dekking van achtergrondbedekking.
background-color
Kleur van achtergrondbedekking.

Voorbeeld - een achtergrondbedekking instellen die grijs is met een dekking van 70%:

.s7videoviewer .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:

.s7videoviewer .s7linkdialog .s7dialog

CSS-eigenschappen van het dialoogvenster

border-radius
De randstraal van het dialoogvenster voor het geval dat het dialoogvenster niet de volledige browser neemt.
background-color
Achtergrondkleur van dialoogvenster.
width
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval gebruikt het dialoogvenster het volledige browservenster (deze modus heeft de voorkeur op aanraakapparaten).
height
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval gebruikt het dialoogvenster het volledige browservenster (deze modus heeft de voorkeur op aanraakapparaten).

Voorbeeld - Als u het dialoogvenster zo wilt instellen dat het volledige browservenster wordt gebruikt en een witte achtergrond op aanraakapparaten heeft:

.s7videoviewer .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

.s7videoviewer .s7linkdialog .s7dialogheader

CSS-eigenschappen van de koptekst van het dialoogvenster

opvullen
Opvulling binnen voor koptekstinhoud.

Het pictogram en de titeltekst worden verpakt in een extra container die wordt bestuurd met

.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline

CSS-eigenschappen van de dialoogregel

opvullen
Opvulling binnen voor koptekstpictogram en titel

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer

.s7videoviewer .s7linkdialog .s7dialogheadericon

CSS-eigenschappen van het pictogram van de koptekst in het dialoogvenster

width
Pictogrambreedte.
height
Hoogte pictogram.
achtergrondafbeelding
Pictogramafbeelding.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

De titel van de koptekst wordt bestuurd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7dialogheadertext

CSS-eigenschappen van de koptekst van het dialoogvenster

font-weight
Fontgewicht.
tekengrootte
Hoogte lettertype.
font-family
Fontfamilie.
opvullen
Opvulling van interne tekst.

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7closebutton

CSS-eigenschappen van de knop close ​

top
Verticale knoppositie ten opzichte van koptekstcontainer.
right
Horizontale knoppositie ten opzichte van koptekstcontainer.
width
Knopbreedte.
height
Hoogte van knop.
opvullen
Opvulling binnen van knop.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt de 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 voor meer informatie .

Voorbeeld - Een koptekst voor een dialoogvenster instellen met opvulling, een pictogram van 22 x 12 pixels en een vetgedrukte 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:

.s7videoviewer .s7linkdialog .s7dialogheader {
 padding: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7videoviewer .s7linkdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlglink_cap.png");
    height: 12px;
    width: 22px;
}
.s7videoviewer .s7linkdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7videoviewer .s7linkdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7videoviewer .s7linkdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Dialoogvoettekst bestaat uit de knop Annuleren. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7dialogfooter

CSS-eigenschappen van de voettekst van het dialoogvenster ​

border
Rand die u kunt gebruiken om de voettekst visueel te scheiden van de rest van het dialoogvenster.

De voettekst heeft een binnencontainer waarmee de knop behouden blijft. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer

CSS-eigenschappen van de knopcontainer van het dialoogvenster

opvullen
Opvulling binnen tussen de voettekst en de knop.

Selecteer Alle knoop wordt gecontroleerd met de volgende CSS klassenselecteur:

.s7videoviewer .s7linkdialog .s7dialogactionbutton

De knop is alleen beschikbaar op desktopsystemen.

CSS-eigenschappen van de knop Alles selecteren

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
De knop Alles selecteren ondersteunt de knop 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:

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

CSS-eigenschappen van de knop cancel van het dialoogvenster

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
Deze knop ondersteunt de 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:

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

CSS-eigenschappen van de knop

font-weight
Dikte van lettertype knop.
tekengrootte
Tekengrootte van knop.
font-family
Lettertypefamilie knop.
regelhoogte
Teksthoogte in de knop. Heeft invloed op de verticale uitlijning.
box-shadow
Slagschaduw.
marge-rechts
Marge rechterknop.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - voor het instellen van een voettekst in een dialoogvenster met een knop Annuleren van 64 x 34, met een andere tekstkleur en achtergrondkleur voor elke knopstatus:

.s7videoviewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .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:

.s7videoviewer .s7linkdialog .s7dialogviewarea

CSS-eigenschappen van het weergavegebied van het dialoogvenster ​

height
De hoogte van het gebied van het hoofddialoogvenster. Deze mag alleen worden opgegeven wanneer het dialoogvenster in de bureaubladmodus werkt. Deze optie is niet van toepassing wanneer de grootte van het dialoogvenster zodanig is dat het volledige browservenster wordt ingenomen.
background-color
De achtergrondkleur van het gebied van het hoofddialoogvenster.
marge
Buitenmarge.

Voorbeeld - als u een gebied in het hoofddialoogvenster wilt instellen op een hoogte van 300 pixels, een marge van 10 pixels en een witte achtergrond wilt gebruiken:

.s7videoviewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Alle formulierinhoud (zoals labels en invoervelden) bevindt zich in een container die wordt beheerd met

.s7videoviewer .s7linkdialog .s7dialogbody

CSS-eigenschappen van de hoofdtekst van het dialoogvenster ​

opvullen
Opvulling binnen.

Voorbeeld - als u formulierinhoud wilt instellen met tien pixelopvulling:

.s7videoviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

Alle statische labels in het dialoogvenster worden beheerd met

.s7videoviewer .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. ​

font-weight
Breedte van lettertype label.
tekengrootte
Tekengrootte label.
font-family
Lettertypefamilie label.
kleur
Labeltekstkleur.

De dialoogvensterlabels kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - als u alle labels wilt instellen op grijs, vet met een lettertype van negen pixels:

.s7videoviewer .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:

.s7videoviewer .s7linkdialog .s7dialoginputwide

CSS-eigenschappen van het invoerveld van het dialoogvenster

width
Tekstbreedte.
opvullen
Opvulling binnen.

Voorbeeld - als u de tekstkopie wilt instellen op 430 pixels breed en onderaan een opvulling van 10 pixels bevat:

.s7videoviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

De koppeling voor delen is ondergebracht in een container en wordt bestuurd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

border
Rand rond de container voor de gedeelde koppeling.
opvullen
Opvulling binnen.

Voorbeeld - als u een grijze rand van één pixel wilt instellen rondom de ingesloten codetekst en een opvulling van negen pixels wilt instellen:

.s7videoviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

De koppeling voor delen zelf wordt beheerd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7linkdialog .s7dialoglink

CSS-eigenschappen van het dialoogvenster delen koppeling

width
Koppelingsbreedte delen.

Voorbeeld - als u de koppeling voor delen wilt instellen op 450 pixels breed:

.s7videoviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8