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 hulpmiddel van het verbindingsaandeel

U kunt de knop uit het deelvenster Sociaal delen verwijderen door de CSS-eigenschap display:none in te stellen op de CSS-klasse.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​.

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 - aan opstelling een achtergrondoverlay om grijs met 70% opaciteit te zijn:

.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 de dialoogdoos

Voorbeeld - aan opstelling de dialoogdoos om het volledige browser venster te gebruiken en een witte achtergrond op aanrakingsapparaten te hebben:

.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 dialoogdoos kopbal

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 dialooglijn

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer

.s7video360viewer .s7linkdialog .s7dialogheadericon

CSS eigenschappen van het pictogram van de dialoogvakje kopbal

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

.s7video360viewer .s7linkdialog .s7dialogheadertext

CSS eigenschappen van de tekst van de dialoogdoos kopbal

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7linkdialog .s7closebutton

CSS-eigenschappen van de knop close ​

De knopinfo Sluiten en de titel van het dialoogvenster kunnen worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​.

Voorbeeld - aan opstelling een kopbal van de dialoogdoos met het opvullen, 22 x 12 pixelpictogram, en een vette, 16 punttitel. 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 de knoopcontainer van de dialoogdoos

De knop Alles selecteren wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7linkdialog .s7dialogactionbutton

De knop is alleen beschikbaar op desktopsystemen.

CSS eigenschappen van Uitgezocht Al knoop

De knop Annuleren wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

CSS eigenschappen van de dialoogdoos annuleert knoop

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 knoop

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​.

Voorbeeld - aan opstelling een dialoogvakje footer met een knoop 64 x 34 annuleert, die tekstkleur en achtergrondkleuren hebben die voor elke knoopstaat verschillend zijn:

.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 - aan opstelling een belangrijkste gebied van de dialoogdoos om 300 pixel hoogte te zijn, een 10 pixelmarge te hebben, en een witte achtergrond te gebruiken:

.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 - aan opstellingsvorminhoud om tien pixel het opvullen te hebben:

.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 ​ Localisatie van gebruikersinterfaceelementen ​.

Voorbeeld - aan opstelling alle etiketten om grijs, vet met een negen pixeldoopvont te zijn:

.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 gebied van de dialoogdoos input-breed

Voorbeeld - om tekstexemplaar te plaatsen om 430 pixel breed te zijn en een 10 pixel het opvullen in de bodem te hebben:

.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 container van de dialoogvakinput

Voorbeeld - om een één pixel grijze grens rond inbedt codetekst te plaatsen en negen pixel van het opvullen te hebben:

.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 de dialoogdoos delen verbinding

Voorbeeld - om de aandeelverbinding te plaatsen om 450 pixel breed te zijn:

.s7video360viewer .s7linkdialog .s7dialoglink {
    width: 450px;
}