E-postresurs email-share
Verktyget för e-postdelning består av en knapp som läggs till på panelen Dela via sociala medier och i den modala dialogrutan som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.
Utseendet på e-postdelningsknappen styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emailshare
CSS-egenskaper för e-postdelningsverktyget
state attributväljare, 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 inställningen display:none CSS-egenskap i dess CSS-klass.
Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - Om du vill ställa in en knapp för e-postdelning som är 28 x 28 pixlar och som visar olika bilder för de fyra olika knapplägena.
.s7ecatalogsearchviewer .s7emailshare {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}
Bakgrundsöverlägget som täcker webbsidan när dialogrutan är aktiv styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay
CSS-egenskaper för bakåtövertäckningen
Exempel - för att ställa in bakgrundsövertäckningen till grått med 70 % opacitet:
.s7ecatalogsearchviewer .s7emaildialog .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å pekenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialog
CSS-egenskaper i dialogrutan
Exempel - för att ställa in en dialogruta så att hela webbläsarfönstret används och att enheten har en vit bakgrund:
.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .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
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader
CSS-egenskaper för dialogrutans rubrik
Ikonen och rubriktexten placeras i en extra behållare som styrs med
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline
CSS-egenskaper för dialograden
Rubrikikonen styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon
CSS-egenskaper för dialogrutans rubrikikon
Rubriken styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext
CSS-egenskaper för rubriktexten i dialogrutan
Stängningsknappen styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton
CSS-egenskaper för stängningsknappen
state attributväljare, 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 användargränssnittselement för mer information.
Exempel - Om du vill ställa in ett dialoghuvud med utfyllnad, en ikon med storleken 24 x 17 pixlar och en rubrik med 16 punkter i fetstil. Och slutligen, och en stängningsknapp på 28 x 28 pixlar placerade två pixlar uppifrån och två pixlar från höger om dialogrutans behållare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon {
background-image: url("images/sdk/dlgemail_cap.png");
height: 17px;
width: 24px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Dialogrutans sidfot består av knapparna Avbryt och Skicka e-post. Sidfotsbehållaren styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter
CSS-egenskaper för dialogrutans sidfot
Sidfoten har en inre behållare som behåller båda knapparna. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer
CSS-egenskaper för behållaren för dialogruteknappen
Knappen Avbryt styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton
CSS-egenskaper för knappen Avbryt i dialogrutan
state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.Knappen Skicka e-post styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton
CSS-egenskaper för dialogrutans åtgärdsknapp
state attributväljare, 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:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button
CSS-egenskaper för knappen
Den här knappens verktygstips kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - om du vill ställa in en dialogruteslut med knappen Avbryt 64 x 34 och skicka e-postknappen 82 x 34, med textfärgen och bakgrundsfärgen olika för varje knappläge:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .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:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea
CSS-egenskaper i dialogrutans visningsområde
state attributväljare. Den är inställd på sendsuccess när e-postformuläret skickas och dialogrutan innehåller ett bekräftelsemeddelande. Så länge bekräftelsemeddelandet är litet kan den här attributväljaren användas för att minska dialogrutans höjd när ett sådant bekräftelsemeddelande visas.Exempel - Om du vill ställa in att huvudområdet i dialogrutan ska vara 300 pixlar högt från början och 100 pixlar högt när bekräftelsemeddelandet visas, har du en marginal på tio pixlar och använder en vit bakgrund:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
height:100px;
}
Allt formulärinnehåll (som etiketter och inmatningsfält) finns i en behållare som styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .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
Exempel - om du vill ställa in formulärinnehåll så att det har en utfyllnad på tio pixlar:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody {
padding: 10px;
}
Dialogruteformuläret fylls i rad för rad, där varje rad innehåller en del av formulärinnehållet (som en etikett och ett textinmatningsfält). En formulärrad styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline
CSS-egenskaper för dialograden
Exempel - om du vill ställa in ett dialogruteformulär så att det får tio pixlar för varje rad:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
Alla statiska etiketter i dialogrutan styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel
Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på text på olika ställen i användargränssnittet.
CSS-egenskaper för dialogruteetiketten.
Dialogruteetiketter kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - om du vill ställa in alla etiketter till grått, fetstil med ett teckensnitt på nio pixlar:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
Alla statiska etiketter som visas till vänster om formulärinmatningsfälten styrs med:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel
CSS-egenskaper för dialogrutans indataetikett
Exempel - om du vill ställa in etiketter för inmatningsfält så att de är 50 pixlar breda, högerjusterade, har tio pixlar utfyllnad och en marginal på tio pixlar till höger:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
margin-right: 10px;
padding: 10px;
text-align: right;
width: 50px;
}
Varje formulärindatafält placeras i behållaren så att du kan använda en anpassad kantlinje runt indatafältet. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer
CSS-egenskaper för dialogrutans indatabehållare
state attributväljare. Den är inställd på verifyerror när användaren gör ett misstag i indataformatet och den interna valideringen misslyckas. Den här attributväljaren kan användas för att markera felaktiga användarindata i formuläret.De flesta indatafält som sprids från etiketten till vänster upp till höger i dialogrutans brödtext (som inkluderar fältet Från och fältet Meddelande) styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide
CSS-egenskaper för dialogrutans inmatningsfält
Fältet Till är smalare eftersom det tilldelar utrymme för knappen Ta bort e-post till höger. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort
CSS-egenskaper för dialogrutans korta inmatningsfält
Exempel - Att ställa in ett formulär så att det har en grå kant på en pixel med nio pixlar utfyllnad runt alla inmatningsfält. Att ha samma kantlinje i röd färg för fält som inte godkänns vid validering. Och slutligen, om du vill ha 250 pixlar bred till-fält och resten av inmatningsfälten 300 pixlar bred:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
width: 300px;
}
Indatafältet för e-postmeddelanden styrs också med:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage
Med den här klassen kan du ange specifika egenskaper för den underliggande TEXTAREA -element.
CSS-egenskaper för dialogrutemeddelandet
Exempel - om du vill ställa in ett e-postmeddelande så att det är 50 pixlar högt och använder break-word automatisk radbrytning:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
height: 50px;
word-wrap: break-word;
}
Med knappen Lägg till en annan e-postadress kan en användare lägga till fler än en adress i e-postformuläret. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton
CSS-egenskaper i dialogrutan lägger till e-postadressknapp
state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - Om du vill ställa in knappen "Lägg till en annan e-postadress" så att den är 25 pixlar hög använder du 12 punkters fet stil med högerjustering och en annan textfärg och bild för varje läge:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
text-align:right;
font-size:12pt;
font-weight:bold;
background-position:left center;
line-height:25px;
padding-left:30px;
height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
color:#000000;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
color:#000000;
text-decoration:underline;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
Med knappen Ta bort kan en användare ta bort extra adresser från e-postformuläret. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton
CSS-egenskaper för dialogrutan Ta bort e-postknapp
state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - om du vill ställa in en Ta bort-knapp på 25 x 25 pixlar och använda en annan bild för varje läge:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
width:25px;
height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
background-image:url(images/sdk/dlgremove_up.png);
}
Innehållet som delas visas längst ned i dialogrutan och innehåller en miniatyrbild, rubrik, ursprungs-URL och beskrivning. Den placeras i en behållare som styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent
CSS-egenskaper för dialogrutans innehåll
Exempel - om du vill ställa in en behållare längst ned så att den har en prickad kant på en pixel och ingen utfyllnad:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
border: 1px dotted #A0A0A0;
padding: 0;
}
Miniatyrbilder styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail
The background-image -egenskapen anges av komponentlogiken.
CSS-egenskaper för dialogrutans miniatyrbild
Exempel - om du vill ställa in en miniatyrbild som är 90 x 60 pixlar och en överkant som är justerad med tio pixlar utfyllnad:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
height: 60px;
padding: 10px;
vertical-align: top;
width: 90px;
}
Innehållsrubrik, ursprung och beskrivning grupperas ytterligare i en panel till höger om miniatyrbilden. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel
CSS-egenskaper för informationspanelen i dialogrutan
Exempel - om du vill ställa in en innehållspanel som är 300 pixlar bred:
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
width: 300px;
}
Innehållstiteln styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle
CSS-egenskaper för dialogrutans rubrik
Exempel - om du vill ställa in en innehållstitel så att den använder fet stil och har en marginal på tio pixlar:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
font-weight: bold;
margin: 10px;
}
Innehållets ursprung styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin
CSS-egenskaper för dialogrutans innehållsursprung
Exempel - om du vill ställa in innehållets utgångspunkt så att den har en marginal på tio pixlar:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
margin: 10px;
}
Innehållsbeskrivningen styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription
CSS-egenskaper för dialogrutans innehållsbeskrivning
Exempel - om du vill ställa in en innehållsbeskrivning så att den har en marginal på tio pixlar och ett teckensnitt med nio punkter:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
font-size: 9pt;
margin: 10px;
}
När en användare anger felaktiga indata och den infogade valideringen misslyckas visas ett meddelande högst upp i dialogrutan. Det här meddelandet visas även när dialogrutan måste återge ett fel eller ett bekräftelsemeddelande när formuläret skickas. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage
CSS-egenskaper i dialogrutans felmeddelande
state attributväljare med följande möjliga värden: verifyerror, senderroroch sendsuccess. Värdet verifyerror anges när ett meddelande visas på grund av ett internt indatavalideringsfel. Värdet senderror anges när en backend-e-posttjänst rapporterar ett fel. Värdet sendsuccess anges när e-post har skickats. På det här sättet kan du formatera meddelandet på olika sätt beroende på hur dialogrutan ser ut.Knappens funktionsbeskrivning kan lokaliseras.
Se Lokalisering av användargränssnittselement för mer information.
Exempel - Om du vill ange att ett meddelande ska använda ett teckensnitt med tio punkters fet stil har du en radhöjd på 25 pixlar och en utfyllnad på 20 pixlar till vänster. Och slutligen, använd en utropsteckenikon, röd text om det finns ett fel och ingen ikon och grön text om det lyckas:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
background-image: none;
color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
background-position: left center;
font-size: 10pt;
font-weight: bold;
line-height: 25px;
padding-left: 20px;
}
Om lodrät rullning behövs återges rullningslisten i panelen nära den högra kanten av dialogrutan, som styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel
CSS-egenskaper för dialogrutans rullningspanel
Exempel - för att ställa in en rullningspanel till 44 pixlar bred:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
width: 44px;
}
Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar
CSS-egenskaper för rullningslisten
Exempel - för att ställa in en rullningslist som är 28 pixlar bred, en åtta pixelmarginaler uppifrån, till höger och nedåt på rullningspanelen:
.s7ecatalogsearchviewer .s7emaildialog .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:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack
CSS-egenskaper för rullningsspåret
Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en grå bakgrund:
.s7ecatalogsearchviewer .s7emaildialog .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, men tumhöjden ändras inte dynamiskt beroende på mängden innehåll. Du kan konfigurera tumhöjden och andra aspekter med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb
CSS-egenskaper för rullningslistens reglage
state attributväljare, som kan användas för att tillämpa olika skal på olika tumlägen: up, down, overoch disabled.Exempel - för att ställa in rullningslistens reglage som är 28 x 45 pixlar, har en marginal på tio pixlar över och under och har olika teckningar för varje läge:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .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:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton
Det går inte att placera rullningsknappar med CSS top, left, bottomoch right egenskaper. I stället placerar visningsprogramlogiken dem automatiskt.
CSS-egenskaper för de övre och nedre rullningsknapparna
state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, overoch disabled.Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge:
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}