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

Bädda in resurs

Senast uppdaterad: 22 juli 2024
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Verktyget Bädda in delning 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 att bädda in delning styrs med följande CSS-klassväljare:

.s7video360viewer .s7embedshare

CSS-egenskaper för det inbäddade delningsverktyget

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 även 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. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in en inbäddad delningsknapp som är 28 x 28 pixlar och visar en bild för vart och ett av de fyra knapplägena:

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

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

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

.s7video360viewer .s7embeddialog .s7dialogheader

CSS-egenskaper för dialogrutans rubrik

utfyllnadInre utfyllnad för rubrikinnehåll.

Ikonen och rubriktexten placeras i en extra behållare som styrs av följande:

.s7video360viewer .s7embeddialog .s7dialogheader .s7dialogline

CSS-egenskaper för dialograden

utfyllnadInre utfyllnad för rubrikikonen och titeln

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

.s7video360viewer .s7embeddialog .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 även CSS-fragment.

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

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

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

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

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

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

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

CSS-egenskaper för dialogruteknappbehållaren

utfyllnadInre utfyllnad mellan sidfoten och knappen.

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

.s7video360viewer .s7embeddialog .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 .s7embeddialog .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 .s7embeddialog .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 funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

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

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

Huvuddialogrutan, mellan sidhuvudet och sidfoten, innehåller rullningsbart dialogruteinnehåll och rullningspanelen till höger. 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 .s7embeddialog .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å tio pixlar och använder en vit bakgrund:

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

Allt formulärinnehåll (som etiketter och inmatningsfält) finns i en behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogbody

Om höjden på den här behållaren verkar vara större än huvudområdet i dialogrutan aktiveras en lodrät rullning automatiskt av komponenten.

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:

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

Alla statiska etiketter i dialogruteformuläret styrs med

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

Dialogruteetiketter kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

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

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

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

.s7video360viewer .s7embeddialog .s7dialoginputwide

CSS-egenskaper för dialogrutans inmatningsfält

widthBredd på indatafält.
utfyllnadInre utfyllnad.

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

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

Inbäddningskoden kapslas i behållaren och styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

widthBredden på behållaren för inbäddningskoden.
kantKant runt behållaren för inbäddningskoden.
utfyllnadInre utfyllnad.

Exempel - Om du vill ange en grå kant på en pixel runt inbäddad kodtext, gör du den 430 pixlar bred och har en utfyllnad på tio pixlar:

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

Den faktiska inbäddningskodtexten styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

automatisk radbrytningRadbrytningsformat.

Exempel - Så här konfigurerar du inbäddningskod så att break-word ordomslutning används:

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

Etiketten och listrutan för inbäddningsstorlek finns längst ned i dialogrutan och placeras i en behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

CSS-egenskaper i dialogrutan, bädda in storlekspanelen

utfyllnadInre utfyllnad.

Exempel - för att ställa in en panel för inbäddningsstorlek så att den har tio pixlar utfyllnad:

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

Storleken och justeringen för etiketten för inbäddningsstorlek styrs av följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

CSS-egenskaper i dialogrutan, bädda in storlekspanelen

lodrät justeringLodrät etikettjustering.
widthEtikettens bredd.

Exempel - för att ange att etiketten för inbäddningsstorlek ska vara justerad mot överkanten och 80 pixlar bred:

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

Bredden på kombinationsrutan för inbäddningsstorlek styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7combobox

CSS-egenskaper för kombinationsrutan

widthBredd på kombinationsruta.
NOTE
Kombinationsrutan stöder attributväljaren expanded med möjliga värden true och false. Värdet true används när kombinationsrutan visar en av fördefinierade inbäddningsstorlekar, vilket innebär att all tillgänglig bredd bör användas. Värdet false används när alternativet för anpassad storlek väljs i kombinationsrutan, så det bör krympa för att tillåta utrymme för anpassade indatafält för bredd och höjd.

Exempel - om du vill att kombinationsrutan för inbäddningsstorlek ska vara 300 pixlar bred när ett fördefinierat objekt visas och 110 pixlar bred när en anpassad storlek visas:

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

Höjden på kombinationsrutetexten definieras av ett särskilt inre element och styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext

CSS-egenskaper för kombinationsruttexten

heightTexthöjd för kombinationsruta.

Exempel - för att ange kombinationsrutans texthöjd för inbäddningsstorlek till 40 pixlar:

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

Kombinationsrutan har en nedrullningsknapp till höger och den styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS-egenskaper för kombinationsruteknappen

övreLodrät knappposition inuti kombinationsrutan.
högerVågrät knappposition inuti kombinationsrutan.
widthKnappbredd.
heightKnapphöjd.
background-imageKnappbild för varje läge.
background-position

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

Se även 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.

Exempel - om du vill ställa in en nedrullningsknapp på 28 x 28 pixlar och ha en separat bild för varje läge:

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

Panelen med listan över inbäddningsstorlekar som visas när kombinationsrutan öppnas, styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7comboboxdropdown

Panelens storlek och position styrs av komponenten. Det går inte att ändra den med CSS.

CSS-egenskaper för kombinationsrutans listruta

kantPanelkant.

Exempel - för att ange att kombinationsrutepanelen ska ha en grå kant på en pixel:

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

Ett enskilt objekt i en nedrullningsbar panel som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dropdownitemanchor

CSS-egenskaper för det nedrullningsbara objektets ankarpunkt

background-colorObjektbakgrund.

Exempel - om du vill ange att objektet i kombinationsrutepanelen ska ha en vit bakgrund:

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

En bock visas till vänster om det markerade objektet i kombinationsrutepanelen som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7checkmark

CSS-egenskaper för kryssrutan

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

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

Se även CSS-fragment.

Exempel - för att ange bockmarkeringsikonen till 25 x 25 pixlar:

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

När alternativet Anpassad storlek är markerat i kombinationsrutan för inbäddningsstorlek visas två extra inmatningsfält till höger så att användaren kan ange en anpassad inbäddningsstorlek. Dessa fält placeras i en behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogcustomsizepanel

CSS-egenskaper för dialogrutans panel för anpassad storlek

kvarAvstånd från kombinationsrutan för inbäddningsstorlek.

Exempel - om du vill ange en anpassad storlek för indatafältpanelen till 20 pixlar till höger om kombinationsrutan:

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

Varje indatafält med anpassad storlek kapslas i en behållare som återger en kant och anger marginalen mellan fälten. Den styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogcustomsize

CSS-egenskaper för dialogrutans anpassade storlek

kantKant runt inmatningsfältet.
widthBredd på indatafält.
marginalIndatafältsmarginal.
utfyllnadUtfyllnad för indatafält.

Exempel - Om du vill ange att inmatningsfält med anpassad storlek ska ha en pixelgrå kant, marginal, utfyllnad och vara 70 pixlar breda:

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

Om du behöver rulla lodrätt återges rullningslisten i panelen nära den högra kanten av dialogrutan, som styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7dialogscrollpanel

CSS-egenskaper för dialogrutans rullningspanel

widthBredd på rullningspanelen.

Exempel - för att ställa in en rullningspanel på 44 pixlar bred

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

Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7scrollbar

CSS-egenskaper för rullningslisten

widthBredd på rullningslist.
övreDen lodräta rullningslistens förskjutning från rullningspanelens överkant.
nederkantDen lodräta rullningslistens förskjutning från rullningspanelens nederkant.
högerDen vågräta rullningslistens förskjutning från rullningspanelens högra kant.

Exempel - för att ställa in en rullningslist som är 28 pixlar bred och har en åtta pixelmarginaler uppifrån, till höger och nedåt på rullningspanelen:

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

Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS-egenskaper för rullningslistspåret

widthSpårbredd.
background-colorSpåra bakgrundsfärg.

Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en grå bakgrund:

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

Rullningslistens reglage rör sig lodrätt inom ett rullningsspårsområde. Dess lodräta position styrs helt av komponentlogiken. Höjden på tummen ändras dock inte dynamiskt beroende på mängden innehåll. Miniatyrhöjden och andra aspekter kan konfigureras med följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS-egenskaper för rullningslistens reglage

widthMiniatyrbredd.
heightHöjd på tummen.
-utfyllnadspunktDen lodräta utfyllnaden mellan spårets överkant.
utfyllnad-nederkantDen lodräta utfyllnaden mellan spårets nederkant.
background-imageBilden som visas för ett visst tumläge.
background-position

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

Se även CSS-fragment.

NOTE
Tummen stöder attributväljaren state, som kan användas för att tillämpa olika skal på olika tumlägen: up, down, over och disabled.

Exempel - om du vill ställa in en rullningslist som är 28 x 45 pixlar, har en marginal på tio pixlar över och under och har olika teckningar för varje läge:

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

Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskaper för den övre och undre rullningsknappen

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 även CSS-fragment.

NOTE
Dessa knappar har stöd för attributväljaren state, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, over och disabled.

Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge:

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8