Delen insluiten embed-share

Het gereedschap Delen insluiten bestaat uit een knop die wordt toegevoegd aan het deelvenster Delen via sociale media 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 vormgeving van de knop Delen insluiten wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7embedshare

CSS eigenschappen van het inbedden hulpmiddel van het aandeel

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 ​ voor meer informatie.

Voorbeeld - aan opstelling inbedt aandeelknoop die 28 x 28 pixel is, en toont een verschillend beeld voor elk van de vier verschillende knoopstaten:

.s7video360viewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7video360viewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7video360viewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7video360viewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7video360viewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

De achtergrondoverlay die de webpagina bedekt wanneer het dialoogvenster actief is, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7backoverlay

CSS eigenschappen van de achtergrondoverlay

Voorbeeld - aan opstelling een achtergrondoverlay om grijs met 70% opaciteit te zijn:

.s7video360viewer .s7embeddialog .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 .s7embeddialog .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 .s7embeddialog .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

.s7video360viewer .s7embeddialog .s7dialogheader

CSS eigenschappen van de dialoogdoos kopbal

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

.s7video360viewer .s7embeddialog .s7dialogheader .s7dialogline

CSS eigenschappen van de dialooglijn

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogheadericon

CSS eigenschappen van het pictogram van de dialoogvakje kopbal

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

.s7video360viewer .s7embeddialog .s7dialogheadertext

CSS eigenschappen van de tekst van de dialoogdoos kopbal

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7closebutton

CSS-eigenschappen van de knop close ​

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - aan opstellingsdialoogkopbal met het opvullen, 24 x 14 pixelpictogram, en een vette, 16 punttitel. Tot slot een knop Sluiten van 28 x 28 pixels, geplaatst op twee pixels van de bovenkant en twee pixels van de rechterkant van de dialoogcontainer:

.s7video360viewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7video360viewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7video360viewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7video360viewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7video360viewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7video360viewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7video360viewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7video360viewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7video360viewer .s7embeddialog .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:

.s7video360viewer .s7embeddialog .s7dialogfooter

CSS-eigenschappen van de voettekst van het dialoogvenster ​

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

.s7video360viewer .s7embeddialog .s7dialogbuttoncontainer

CSS eigenschappen van de de knoopcontainer van de dialoogdoos

Selecteer Alle knoop wordt gecontroleerd met de volgende CSS klassenselecteur:

.s7video360viewer .s7embeddialog .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 .s7embeddialog .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 .s7embeddialog .s7dialogfooter .s7button

CSS eigenschappen van de knoop

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - aan opstelling een dialoogdoos footer met een 64x 34 annuleert knoop, die een tekstkleur en achtergrondkleur hebben die voor elke knoopstaat verschillend is:

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

Het hoofddialoogvenster tussen de kop- en voettekst bevat schuifbare inhoud in het dialoogvenster en het schuifvenster aan de rechterkant. In alle gevallen beheert de component de breedte van dit gebied. Het is niet mogelijk om dit in CSS in te stellen. Het hoofddialoogvenster wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .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 tien pixelmarge hebben, en een witte achtergrond gebruiken:

.s7video360viewer .s7embeddialog .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 .s7embeddialog .s7dialogbody

Als de hoogte van deze container groter lijkt te zijn dan het gebied van het hoofddialoogvenster, wordt automatisch een verticaal schuiven ingeschakeld door de component.

CSS-eigenschappen van de hoofdtekst van het dialoogvenster ​

Voorbeeld - aan opstellingsvorminhoud om tien pixel het opvullen te hebben:

.s7video360viewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

Alle statische labels in het dialoogvenster worden beheerd met

.s7video360viewer .s7embeddialog .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. ​

Labels in dialoogvensters kunnen worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

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

.s7video360viewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

De grootte van de tekstkopie die boven op de insluitcode wordt weergegeven, wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialoginputwide

CSS eigenschappen van het gebied van de dialoogdoos input-breed

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

.s7video360viewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

De insluitcode wordt ondergebracht in container en bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

CSS eigenschappen van de container van de dialoogvakinput

Voorbeeld - om een één pixel grijze grens rond ingebedde codetekst te plaatsen, het 430 pixel breed te maken, en een tien pixel het opvullen te hebben:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

De eigenlijke ingesloten codetekst wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

CSS eigenschappen van de container van de dialoogvakinput

Voorbeeld - om ingebedde code te vormen om break-word woord het verpakken te gebruiken:

.s7video360viewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

Label en vervolgkeuzelijst voor insluitgrootte bevinden zich onder in het dialoogvenster en worden geplaatst in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

CSS eigenschappen van de dialoogdoos inbedden grootte paneel

Voorbeeld - aan opstelling bedt groottepaneel om tien pixel van het opvullen te hebben:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

De grootte en uitlijning van het label voor de insluitgrootte worden bepaald met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

CSS eigenschappen van de dialoogdoos inbedden grootte paneel

Voorbeeld - om het ingebedde grootteetiket te plaatsen om top-oriented en 80 pixel breed te zijn:

.s7video360viewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

De breedte van de keuzelijst met insluitgrootte wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7combobox

CSS eigenschappen van combodoos

Voorbeeld - om de ingebedde grootte combodoos te plaatsen om 300 pixel breed te zijn wanneer het tonen van een vooraf bepaald punt en 110 pixel breed wanneer het tonen van een douanegrootte:

.s7video360viewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7video360viewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

De hoogte van de tekst van de keuzelijst met invoervak wordt gedefinieerd door een speciaal binnenelement en wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext

CSS eigenschappen van de combodoostekst

Voorbeeld - om grootte in te bedden de teksthoogte van de invoerdoos aan 40 pixel:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

De keuzelijst met invoervak heeft rechts een vervolgkeuzelijst en wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS eigenschappen van de combodoos knoop

Voorbeeld - om een drop-down knoop aan 28 x 28 pixel te plaatsen en een afzonderlijk beeld voor elke staat te hebben:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

Het deelvenster met de lijst met insluitgrootten die wordt weergegeven wanneer de keuzelijst met invoervak wordt geopend, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7comboboxdropdown

De grootte en positie van het deelvenster worden bepaald door de component. Het is niet mogelijk deze te wijzigen met CSS.

CSS eigenschappen van combodoos drop-down

Voorbeeld - om het combodoospaneel te plaatsen om een één pixel grijze grens te hebben:

.s7video360viewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Eén item in een vervolgkeuzelijst dat wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dropdownitemanchor

CSS eigenschappen van het drop-down punthanker

Voorbeeld - om het punt van het combodoospaneel te plaatsen om een witte achtergrond te hebben:

.s7video360viewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Een vinkje links van het geselecteerde item in het deelvenster met keuzelijst met invoervak dat wordt bestuurd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7checkmark

CSS eigenschappen van de doos van het vinkje

Voorbeeld - om het pictogram van het vinkje aan 25 x 25 pixel te plaatsen:

.s7video360viewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Als de optie Aangepaste grootte is geselecteerd in de keuzelijst Grootte insluiten, worden rechts in het dialoogvenster twee extra invoervelden weergegeven waarmee de gebruiker een aangepaste insluitgrootte kan invoeren. Deze velden worden verpakt in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogcustomsizepanel

CSS eigenschappen van het paneel van de de douanegrootte van de dialoogdoos

Voorbeeld - om het paneel van de gebieden van de de inputinvoer van de douanegrootte te plaatsen om 20 pixel rechts van de combodoos te zijn:

.s7video360viewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Elk invoerveld met een aangepaste grootte wordt verpakt in een container die een rand rendert en de marge tussen de velden instelt. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogcustomsize

CSS eigenschappen van de grootte van de de dialoogdoos douanegrootte

Voorbeeld - om de gebieden van de de inputinvoer van de douanegrootte te plaatsen om een één pixel grijze grens, marge, opvulling te hebben, en 70 pixel breed te zijn:

.s7video360viewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

Als verticaal schuiven nodig is, wordt de schuifbalk weergegeven in het deelvenster aan de rechterrand van het dialoogvenster, dat wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7dialogscrollpanel

CSS eigenschappen van het paneel van de de dialoogdoos rol

Voorbeeld - aan opstelling een rolpaneel om 44 pixel breed te zijn

.s7video360viewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

De vormgeving van het gebied van de schuifbalk wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7embeddialog .s7scrollbar

CSS eigenschappen van de rolbar

Voorbeeld - aan opstelling een rolbar die 28 pixel breed is en een acht pixelmarge van de bovenkant, het recht, en de bodem van het rolpaneel heeft:

.s7video360viewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Schuifbalktrack is het gebied tussen de bovenste en onderste schuifknop. De component stelt automatisch de positie en de hoogte van het spoor in. De track wordt bestuurd met de volgende CSS-klassenkiezer

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS eigenschappen van het spoor van de rolbar

Voorbeeld - aan opstelling een spoor van de rolbar dat 28 pixel breed is en een grijze achtergrond heeft:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Het schuifbalkblokje beweegt verticaal binnen een schuiftrackgebied. De verticale positie wordt volledig bepaald door de componentlogica. De hoogte van het blokje verandert echter niet dynamisch, afhankelijk van de hoeveelheid inhoud. De duimhoogte en andere aspecten kunnen met de volgende CSS klassenselecteur worden gevormd:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS eigenschappen van het duim van de rolbar

Voorbeeld - aan opstelling een duim van de rolbar dat 28 x 45 pixel is, heeft een tien pixelmarge op de bovenkant en de bodem, en heeft verschillende kunstwerk voor elke staat:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

De vormgeving van de bovenste en onderste schuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Het is niet mogelijk om schuifknoppen te positioneren met de CSS-eigenschappen top , left , bottom en right . In plaats daarvan worden ze automatisch door de viewerlogica geplaatst.

CSS eigenschappen van de bovenkant en bodemrolknopen

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - aan opstellings rolknopen die 28 x 32 pixel zijn en verschillende kunstwerk voor elke staat hebben:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}