Vill du se rekommenderade utbildningar som valts ut åt dig? Logga in när du vill se din nya personaliserade startsida och utforska nästa steg i din utbildningsresa.

Utforska mer nu
DokumentationReferenshandbok för Dynamic Media Viewer

Länkresurs

Senast uppdaterad: 22 juli 2024
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Länkdelningsverktyget består av en knapp som läggs till på panelen Dela via sociala medier och den modala dialogruta som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.

Utseendet på knappen för länkdelning styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkshare

CSS-egenskaper för länkdelningsverktyget

widthKnappbredd.
heightKnapphöjd.
background-imageBilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Det går att ta bort knappen från panelen Dela via CSS-egenskapen display:none i CSS-klassen.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av element i användargränssnittet.

Exempel - om du vill ställa in en knapp för länkdelning som är 28 x 28 pixlar och visar olika bilder för de fyra olika knapplägena:

.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);
}

Bakgrundsöverlägget som täcker webbsidan när dialogrutan är aktiv styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7backoverlay

CSS-egenskaper för bakgrundsövertäckningen

opacitetOpacitet för bakgrundsövertäckning.
background-colorBakgrundsövertäckningsfärg.

Exempel - om du vill ställa in en bakgrundsövertäckning som grå med 70 % opacitet:

.s7video360viewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Som standard visas den modala dialogrutan centrerat på skärmen på stationära datorer och tar hela webbsidans område på touchenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs av följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialog

CSS-egenskaper för dialogrutan

border-radiusDialogrutans kantradie, om dialogrutan inte tar hela webbläsaren.
background-colorDialogrutans bakgrundsfärg.
widthSka antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).
heightSka antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).

Exempel - för att konfigurera dialogrutan så att den använder hela webbläsarfönstret och har en vit bakgrund på beröringsenheter:

.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

Dialogrutans rubrik består av en ikon, en titeltext och en stängningsknapp. Rubrikbehållaren styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheader

CSS-egenskaper för dialogrutans rubrik

utfyllnadInre utfyllnad för rubrikinnehåll.

Ikonen och rubriktexten placeras i en extra behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

CSS-egenskaper för dialograden

utfyllnadInre utfyllnad för rubrikikonen och titeln

Rubrikikonen styrs med följande CSS-klassväljare

.s7video360viewer .s7linkdialog .s7dialogheadericon

CSS-egenskaper för dialogrutans rubrikikon

widthIkonens bredd.
heightIkonhöjd.
background-imageIkonbild.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

Rubriken styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheadertext

CSS-egenskaper för dialogrutans rubriktext

font-weightTeckenbredd.
font-sizeTeckenhöjd.
font-familyTeckensnittsfamilj.
utfyllnadIntern textutfyllnad.

Stängningsknappen styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7closebutton

CSS-egenskaper för stängningsknappen ​

övreLodrät knappposition i förhållande till rubrikbehållare.
högerVågrät knappposition i förhållande till rubrikbehållare.
widthKnappbredd.
heightKnapphöjd.
utfyllnadKnappens inre utfyllnad.
background-imageKnappbild för varje läge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappbeskrivningen Stäng och dialogrutans titel kan lokaliseras. Se Lokalisering av element i användargränssnittet.

Exempel - Om du vill ställa in en dialogruterubrik med utfyllnad, en 22 x 12 pixlar ikon och en 16 punkters rubrik i fet stil. Slutligen en stängningsknapp på 28 x 28 pixlar som placeras två pixlar uppifrån och två pixlar från höger om dialogrutan:

.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);
}

Sidfoten i dialogrutan består av en Avbryt-knapp. Sidfotsbehållaren styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogfooter

CSS-egenskaper för dialogrutans sidfot ​

kantKant som du kan använda för att visuellt separera sidfoten från resten av dialogrutan.

Sidfoten har en inre behållare som behåller knappen. Den styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

CSS-egenskaper för dialogruteknappbehållaren

utfyllnadInre utfyllnad mellan sidfoten och knappen.

Knappen Markera alla styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogactionbutton

Knappen är bara tillgänglig på stationära datorer.

CSS-egenskaper för knappen Markera allt

widthKnappbredd.
heightKnapphöjd.
färgKnapptextfärg för varje läge.
background-colorKnappbakgrundsfärg för varje läge.
NOTE
Knappen Markera allt har stöd för attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappen Avbryt styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

CSS-egenskaper för knappen Avbryt i dialogrutan

widthKnappbredd.
heightKnapphöjd.
färgKnapptextfärg för varje läge.
background-colorKnappbakgrundsfärg för varje läge.
NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Båda knapparna har dessutom en gemensam CSS-klass som kan innehålla CSS-inställningar som är desamma för andra dialogruteknappar:

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

CSS-egenskaper för knappen

font-weightKnappens teckensnittsbredd.
font-sizeKnappens teckenstorlek.
font-familyKnappteckensnittsfamilj.
line-heightTexthöjd inuti knappen. Påverkar lodrät justering.
box-shadowSkugga.
marginal-rightHögerknappsmarginal.

Knappens tips kan lokaliseras. Se Lokalisering av element i användargränssnittet.

Exempel - om du vill ställa in en dialogrutefot med en Avbryt-knapp på 64 x 34, med textfärg och bakgrundsfärger som är olika för varje knappläge:

.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;
}

Huvudområdet i dialogrutan, mellan sidhuvudet och sidfoten, innehåller dialoginnehåll. I samtliga fall hanterar komponenten bredden på det här området - det går inte att ange den i CSS. Huvudområdet i dialogrutan styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogviewarea

CSS-egenskaper i dialogrutans visningsområde ​

heightHöjden på området i huvuddialogrutan. Den ska bara anges när dialogrutan fungerar i skrivbordsläge. Det är inte tillämpligt när dialogrutans storlek ändras så att den upptar hela webbläsarfönstret.
background-colorBakgrundsfärgen i huvuddialogrutan.
marginalYttre marginal.

Exempel - Om du vill ställa in ett huvuddialogruteområde till 300 pixlars höjd har du en marginal på 10 pixlar och använder en vit bakgrund:

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

Allt formulärinnehåll, till exempel etiketter och inmatningsfält, finns inuti en behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogbody

CSS-egenskaper för dialogrutans brödtext ​

utfyllnadInre utfyllnad.

Exempel - för att ställa in formulärinnehåll så att det får utfyllnad på tio pixlar:

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

Alla statiska etiketter i dialogruteformuläret styrs med

.s7video360viewer .s7linkdialog .s7dialoglabel

Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på texter på olika ställen i användargränssnittet.

CSS-egenskaper för dialogruteetiketten. ​

font-weightEtikettens teckensnittsbredd.
font-sizeTeckensnittsstorlek för etikett.
font-familyEtikettteckensnittsfamilj.
färgTextfärg för etikett.

Dialogruteetiketterna kan lokaliseras. Se Lokalisering av element i användargränssnittet.

Exempel - Om du vill ställa in alla etiketter till grått, fet med ett teckensnitt på nio pixlar:

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

Storleken på textkopian som visas ovanpå länken styrs av följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoginputwide

CSS-egenskaper för dialogrutans inmatningsfält

widthTextbredd.
utfyllnadInre utfyllnad.

Exempel - om du vill att textkopian ska vara 430 pixlar bred och ha 10 pixlar utfyllnad längst ned:

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

Delningslänken kapslas i en behållare och styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

kantKant runt delningslänkens behållare.
utfyllnadInre utfyllnad.

Exempel - om du vill ange en grå kant på en pixel runt inbäddningskoden och ha nio pixlar utfyllnad:

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

Själva delningslänken styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoglink

CSS-egenskaper i dialogrutan för att dela länk

widthDela länkbredd.

Exempel - för att ange delningslänken som 450 pixlar bred:

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