Dokumentboks snitflader OIM Klassemodel

Transkript

1 Dokumentboks snitflader OIM Klassemodel 1

2 Indholdsfortegnelse INDHOLDSFORTEGNELSE 2 INTRODUKTION. 4 ELEMENTER.. 5 FORMATERING. 5 OVERSKRIFTER.. 5 FREMHÆVET TEKST. 5 STÆRK FREMHÆVET TEKST. 5 PUNKTOPSTILLING 5 NUMMERERET OPSTILLING.. 5 TABELLER 6 FORMULARER 6 TEKSTFELT 6 TEKSTOMRÅDE.. 7 LISTE 7 AFKRYDSNINGSFELT.. 7 RADIOKNAPPER. 7 OBLIGATORISK FELT 8 FEJL.. 8 SKRIVEBESKYTTET.. 8 FELTBREDDE 8 OPSTILLING.. 9 KNAPPER.. 9 KNAPTYPER. 9 OPSTILLING 10 SYSTEMBESKEDER.. 10 BESKEDTYPER.. 10 SKJUL BESKED. 11 FORLØBSINDIKATOR.. 11 LINKS.. 12 NAVIGATION 12 BRØDKRUMMESTI 13 VÆRKTØJSLINJE.. 13 KNAPPER. 14 TEKST.. 15 TEKST.. 15 TEKSTFELT. 15 SØGEFELT.. 15 MELLEMRUM 16 EFFEKTER.. 16 UNDERMENU. 17 IKONTYPER 19 TRÆ.. 20 NODE 21 NODE (VALGT) 21 NODE (FREMHÆVNING)

3 NODE (AFVENTER) 21 EFFEKTER.. 22 GRUPPE 22 LISTE 23 BREDDER 23 OPSTILLING 23 AFKRYDSNINGSFELT 24 HIERARKI 24 GRUPPER. 25 MEDDELELSESLISTE.. 26 MEDDELELSE (STATUS).. 26 MEDDELELSE (VALGT) 26 MEDDELELSE (LÅST) 27 EFFEKTER.. 27 MEDDELELSESTYPER 27 FUNKTIONER. 28 INFORMATION.. 28 GRUPPE 28 NOTIFIKATIONSLISTE 30 TIP. 30 IKONER 31 3

4 Introduktion Dette dokument beskriver de elementer, der anvendes til brugerfladen i Dokumentboks. Brugerfladen er bygget op af elementer fra OIM CSS Klassemodel beskrevet i Bilag B - OIM CSS Klassemodel fra Den offentlige integrationsmodel for portaler (Version 1.1). Da elementerne fra OIM CSS Klassemodel ikke har været tilstrækkelig til at imødekomme de krav brugerfladen i Dokumentboks har stillet, har det været nødvendigt at bruge yderligere elementer samt udvide enkelte af de eksisterende. Det vil i beskrivelsen af hvert element fremgå, om der er tale om en tilføjelse eller en udvidelse af et eksisterende i forhold til beskrivelsen i OIM CSS Klassemodel. 4

5 Elementer Formatering Overskrifter <h1>overskrift 1</h1> <h2>overskrift 2</h2> <h3>overskrift 3</h3> <h4>overskrift 4</h4> <h5>overskrift 5</h5> <h6>overskrift 6</h6> Fremhævet tekst Fremhævet tekst markeres som Emphazied. <em>dette er en fremhævet tekst</em> Stærk fremhævet tekst Stærkt fremhævet tekst markeres som Strong. <strong>dette er en fremhævet tekst</strong> Punktopstilling Ved punktopstilling benyttes elementet ul. <li>første punkt <li>andet punkt <li>trejde punkt <li>fjerde punkt Nummereret opstilling Ved nummererede lister benyttes elementet ol. <ol> <li>første punkt <li>andet punkt <li>trejde punkt <li>fjerde punkt <ol> 5

6 Tabeller Tabeller anvendes udelukkende til at opstille indholdsdata, der kræver en naturlig gruppering i rækker og kolonner. <table summery= beskrivelse af tabellens indhold > <thead> <th>kolonne 1</th> <th>kolonne 2</th> </thead> <tbody> <td>indhold 1</td> <td>indhold 2</td> </tbody> </table> Bemærk at indholdet af en tabel bliver af hensyn til skærmoplæsere altid beskrevet i attributten summery. Hvor nødvendigt anvendes elementet caption i en tabel til at navngive tabellen og dets indhold. <table summery= beskrivelse af tabellens indhold > <caption>overskrift til tabellen</caption> </table> Formularer Ved anvendelse af formularer bruges elementet fieldset samt elementet div med klassen fieldset til at gruppere formularfelterne. <div class= fieldset > <fieldset> <legend><span>profiloplysninger</span></legend> <p>indtast dit navn og -adresse</p> <label>navn<span class= required >*</span><br /> <input type= text name= navn class= text value= /> </label><br /> <label> -adresse<br /> <input type= text name= class= text value= /> </label><br /> </fieldset> Tekstfelt Hvor brugeren kan indtaste en værdi bruges elementet input med attributtypen text og klassen text. <label>navn<br /> <input type= text name= navn class= text value= /> </label> 6

7 Tekstområde Hvor brugeren kan indtaste en større mængde tekst, bruges elementet text med klassen textarea. <label>beskrivelse<br /> <textarea cols= 10 rows= 10 class= textarea ></textarea> </label> Bemærk korrekt XHTML-syntaks kræver attributterne cols og rows på elementet textarea. Størrelsen sat med antallet af rækker og kolonner kan overskrives med angivelse af højde og bredde i CSS. Liste Når et formularfelt er en liste anvendes elementet select med klassen combobox. Hvor mere end en valgmulighed, skal være synlig, angives antallet af rækker og dermed højden med attributten size. <label>køn<br /> <select class= combobox > <option value= 1 >Kvinde</option> <option value= 2 >Mand</option> </select> </label><br /> <label>antal<br /> <select size= 4 class= combobox > <option value= 1 >1-10</option> <option value= 2 >11-100</option> <option value= 2 > </option> <option value= 2 >1001-</option> </select> </label> Afkrydsningsfelt Til afkrydsningsfelter bruges elementet input med typen checkbox og klassen checkbox. <label> <input type= checkbox name= vilkaar class= checkbox />Vilkår accepteres </label> Radioknapper Til radioknapper bruges elementet input med typen radio og klassen radio. <label> <input type= radio name= radio1 class= radio checked= checked />Kvinde </label><br /> <label> <input type= radio name= radio1 class= radio />Mand </label> 7

8 Obligatorisk felt Hvis et felt er obligatorisk, bliver dette angivet med et ekstra span -element med klassen required. <label>navn <span class= required >*</span><br /> <input type= text name= navn class= text value= /> </label> Fejl Hvis et felt ikke er udfyldt korrekt, bliver dette angivet med et ekstra span -element med klassen fielderror. <label><span class= fielderror > -adresse<br /> <input type= text name= class= text value= /></span> </label> Skrivebeskyttet Hvis et felt indeholder en værdi, der ikke kan ændres, anvendes klassen readonly på elementet label. <label class= readonly > Cpr-nr.: <span> </span> </label> Feltbredde Bredden på et felt angives på elementet label med klassen form, wide, short eller mini. form Anvendes hvis feltet skal optage den fulde bredde af form-gruppen. <label class= form > </label> wide Anvendes hvis feltet skal optage den halve bredde af form-gruppen inkl. margin. To elementer med denne klasse svarer til én med klassen form. <label class= wide > </label> short Anvendes hvis feltet skal optage en kvart bredde af form-gruppen inkl. margin. To elementer med denne klasse svarer til én med klassen wide. <label class= short > </label> 8

9 mini Anvendes hvis feltet skal optage 1/12 af form-gruppen inkl. margin. Tre elementer med denne klasse svarer til én med klassen short. <label class= mini > </label> Opstilling Hvis to eller flere labels ønskes opstillet ved siden af hinanden, anvendes klassen alignleft eller alignright. Her vil en label blive justeret imod hhv. højre eller venstre margin. For at afslutte en opstilling bruges elementet br med klassen newline. <label class= alignleft mini >Postnr. <input type= text name= postnummer class= text /> </label> <label class= alignleft short >By <input type= text name= by class= text /> </label> <br class= newline /> Knapper Til knapper anvendes elementet input med typen submit, reset eller button. Alle har de klassen button. <input type= submit value= OK class= button > Yderligere kan elementet button anvendes med klassen button. <button type= submit class= button >Næste</button> Knaptyper Knapper kan tildeles en klasse, der angiver knappens handling. <button type= submit class= button next >Næste</button> Følgende typer af knapper anvendes: Klasse previous next Beskrivelse Tilbage Næste 9

10 Opstilling Denne klasse er en udvidelse af systembeskeder i OIM CSS. Der gives to klasser alignleft og alignright, der justerer en knap eller link imod hhv. venstre eller højre margin, hvis de placeres i et div -element med klassen buttons. Her vil det yderligere være muligt at bruge link med samme justering. <div class="buttons"> <input type= submit value= OK class= button alignright > <input type= submit value= Annuller class= button alignright > <a href= title= class= alignleft >Gå til oversigten</a> Systembeskeder Systembeskeder benyttes hvis en bruger skal gøres opmærksom på særlig information, fejl eller modtage en bekræftelse på et fuldendt forløb. <div class= notificationbox error > <h2>din profil kunne ikke opdateres</h2> <li>det indtastede postnummer er ikke korrekt udfyldt <li>der er ikke angivet en -adresse Beskedtyper Klassen notificationbox suppleres med error, warning, alert eller info, der muliggør en visuel forskel på de forskellige typer af systembeskeder. error Anvendes når brugeren skal gøres opmærksom på en fejl. Eksempel: Der er ikke angivet en -adresse <div class= notificationbox error > warning Anvendes når brugeren skal advares om en aktuel handling. Eksempel: Hvis du trykker OK vil dine tilmeldinger blive slettet <div class= notificationbox warning > alert Anvendes når brugeren skal præsenteres for en meddelelse fra systemet. Eksempel: Det er i øjeblikket ikke muligt at anvende denne service <div class= notificationbox alert > info Anvendes til fremhævelse af særlig information Eksempel: Du har modtaget nye dokumenter 10

11 <div class= notificationbox info > confirmation Denne klasse er en udvidelse af systembeskeder i OIM CSS. Anvendes samme med klassen info til at give brugeren en bekræftelse på et fuldendt forløb. Eksempel: Du har nu tilmeldt post fra valgte afsender <div class= notificationbox info confirmation > Skjul besked Denne klasse er en udvidelse af systembeskeder i OIM CSS. Når en systembesked kan skjules af brugeren, tilføjes et ekstra div -element med klassen close. <div class= notificationbox > <div class= close onclick= ><span>luk</span> Forløbsindikator Når en bruger skal gennemgå et forløb, der indeholder mere end ét trin, benyttes en forløbsindikator. <ol class= stepindicator > <li class= done >Første trin <b class= tip ></b> <li class= done >Andet trin<b class= tip ></b> <li class= current >Tredie trin <p>her kan vises en beskrivelse eller hjælp til dette trin</p> <p>kan bestå af flere afsnit</p> <b class= tip ></b> <li class= undone >Fjerde trin<b class= tip ></b> <li class= undone >Femte trin<b class= tip ></b> <li class= undone final >Sidste trin<b class= tip ></b> </ol> 11

12 Links Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Når en liste med links skal præsenteres, bruges en punktopstilling i et div -element med klassen links. <div class= links > <li><a href= title= >Link 1</a> <li><a href= title= >Link 2</a> <li><a href= title= >Link 3</a> Hvis listen ønskes placeret på samme linje suppleres klassen links med shortcuts. <div class= links shortcuts > <li><a href= title= >Genvej 1</a> <li><a href= title= >Genvej 2</a> <li class= last ><a href= title= >Genvej 3</a> Navigation Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Til inddeling af indhold benyttes et navigationselement bestående af en punktopstilling med primære og sekundære menupunkter. <div class= navigation > <div class= primary > <li class= first ><a href= title= >Forside</a> <li><a href= title= >Indbakke</a> <li class= selected ><a href= title= >Indstillinger</a> <li class= last ><a href= title= >Hjælp</a> <div class= secondary > <li class= first ><a href= title= >Profil</a> <li class= last selected ><a href= title= >Tilmeldinger</a> 12

13 Hvert navigationspunkt kan have supplerende information angivet i et ekstra span -element. <div class= primary > <li><a href= title= >Indbakke <span>(2)</span></a> Hvis et navigationspunkt linker til e-boks angives dette med klassen eboks. <div class= primary > <li class= eboks ><a href= title= >Gå til e-boks</a> Brødkrummesti Dette element samt tilhørende underelementer er en udvidelse af OIM CSS En brødkrummesti bruges til at vise, hvor den aktuelle side er placeret i indholdshierarkiet. <div class= breadcrumbs > <li class= first ><a href= title= >Forside</a> <li><a href= title= >Hjælp</a> <li class= last >Spørgsmål og svar Værktøjslinje Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Til inddeling af funktioner benyttes et værktøjslinjeelement bestående af en punkopstilling. Hvert punkt har mulighed for undermenupunkter bestående af yderligere en punktopstilling. Bemærk dette element benytter JavaScript til visuelle effekter. Dette er med til at sikre kompatibilitet med flest mulige browsere. <div class= toolbar > <li><div class= button ><a href= title= >Ny</a> <li><div class= button ><a href= title= >Rediger</a> <li><div class= button ><a href= title= >Slet</a> 13

14 Knapper En værktøjslinje kan indeholde tre typer af knapper button, button dropdown samt button split. Button Hvor der visuelt er brug for at vise en almindelig knap. <div class= button > <a href= title= >Ny mappe</a> Hvis en knap ikke skal vise et muligt ikon, benyttes klassen noicon på a -elementet. <div class= button > <a href= title= class= noicon >Ny mappe</a> Hvis en knap ikke skal vise den tilhørende tekst, benyttes klassen notext på a -elementet og teksten placeres i et ekstra span -element. Dette giver mulighed for at placere teksten udenfor skærmen, så skærmoplæsere stadig vil læse teksten. <div class= button button_hover > <a href= title= class= notext ><span>ny mappe</span></a> Button (DropDown) Hvor der visuelt er brug af at vise, at en knap har en undermenu tilknyttet, suppleres button med klassen dropdown. <div class= button dropdown > <a href= title= ><span class= more >Funktioner</span></a> Button (Split) Hvor der visuelt er brug for at vise, at en knap både fungerer som en almindelig knap og yderligere har en undermenu tilknyttet, suppleres button med klassen split. <div class= button split > <a href= title= >Flyt</a> <span class= more ><span>flyt til</span></span> 14

15 Tekst Hvis en tekst eller link placeres i værktøjslinjen bruges klassen text. <div class= toolbar > <li> <div class= text ><a href= title= >Flere søgemuligheder</a> Tekstfelt Hvis et tekstfelt placeres i en værktøjslinje bruges klassen input. Bredden på tekstfeltet angives på samme måde, som i en form-gruppe. <div class= toolbar > <li> <div class= input > <label><span>søgetekst</span><input type= text class= text /></label> Søgefelt Hvis et søgefelt placeres i en værktøjslinje suppleres input med klassen search. Bredden på tekstfeltet angives på samme måde, som i en form-gruppe. <div class= toolbar > <li> <div class= input search > <label><span>søgetekst</span><input type= text class= text /></label> <a href= title= ><span>søg</span></a> 15

16 Mellemrum Hvis et ekstra mellemrum ønskes mellem to elementer i værktøjslinjen benyttes klassen space på li -elementet. <div class= toolbar > <li> <div class= button ><a href= title= >Accepter</a> <li class= space > <div class= button ><a href= title= >Afvis</a> Effekter Hver type af knap giver mulighed for en visuel effekt. Button Når musen bevæger sig over en knap af typen button, suppleres med klassen button_hover. <div class= button button_hover > <a href= title= >Ny mappe</a> Button (DropDown) Når musen bevæger sig over en knap af typen dropdown, suppleres med klassen button_dropdown_hover. <div class= button dropdown button_dropdown_hover > <a href= title= ><span class= more >Funktioner</span></a> Button (Split) Når musen bevæger sig over en knap af typen split, suppleres med klassen button_split_hover. <div class= button split button_split_hover > <a href= title= >Flyt</a> <span class= more ><span>flyt til</span></span> 16

17 Undermenu Elementerne til en undermenu placeres umiddelbart efter en knap af typen dropdown eller split. En undermenu består af en punktopstilling i et div -element med klassen items. Som ekstra effekt tilbydes muligheden for brug af skygge bag undermenuen i form af et div - element med klassen items_shadow. Bemærk placeringen af skyggen sker vha. JavaScript hvori gennemsigtigheden også angives. <div class= toolbar > <li> <div class= button dropdown > <a href= title= ><span class= more >Funktioner</span></a> <div class= items > <li><a href= title= >Ny</a> <li><a href= title= >Rediger</a> <li><a href= title= >Slet</a> <div class="items_shadow"> Seperator For at opdele punkter i en undermenu benyttes klassen seperator på li -elementet. <div class= toolbar > <div class= items > <li><a href= title= >Offentlige myndigheder</a> <li class= seperator ><a href= title= >Private virksomheder</a> 17

18 Gruppe Punkter i en undermenu kan opdeles i en eller flere grupper, hvortil der kan tilføjes en overskrift. <div class= toolbar > <div class= items > <div class= group > <div class= name ><span>vælg en kategori</span> <li><a href= title= >Bank</a> <li><a href= title= >Fagforening</a> <li><a href= title= >Forsikring</a> <div class= items_shadow > Gruppeseperator For visuelt at opdele to grupper suppleres group med klassen seperator. <div class= toolbar > <div class= items > <div class= group > <div class= group seperator > <div class= items_shadow > 18

19 Gruppe med scrollbar Hvis en gruppe indeholder flere menupunkter, end der kan vises på skærmen, tilføjes et ekstra div -element med klassen max, hvor en fast højde med tilhørende scrollbar kan angives. Ydereligere tilføjes et div -element med klassen items_resize, der vha. af JavaScript giver brugeren mulighed for selv at ændre størrelsen på gruppen. <div class= toolbar > <div class= items > <div class= group > <div class= name ><span>vælg en kategori</span> <div class= max > <li><a href= title= >Bank</a> <li><a href= title= >Fagforening</a> <li><a href= title= >Forsikring</a> <div class= items_resize > <div class= items_shadow > Ikontyper Knapper og punkter i undermenuen kan have ikoner tilknyttet. Dette angives som klasse på a -elementet. <div class= button > <a href= title= class= folder_add >Ny mappe</a> Følgende typer af ikoner anvendes: Klasse folder folder_add folder_functions message_save message_new message_reply message_forward messages_move messages_archive messages_delete messages_functions options_views options_sort options_sort_desc selected paging_first Beskrivelse Mappe Ny mappe Mappefunktioner Gem på egen PC Ny meddelelse Besvar meddelelse Videresend meddelelse Flyt meddelelser Arkiver meddelelser Slet meddelelser Meddelelsesfunktioner Visninger Sorter (stigende) Sorter (faldende) Valgt Første 19

20 paging_prev paging_next paging_last Forrige Næste Sidste Træ Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Til visning af en hierarkisk struktur benyttes et træelement bestående af en punktopstilling med mulighed for flere niveauer. Bemærk dette element benytter JavaScript til visuelle effekter som f.eks. det at åbne og lukke noder i træet. Dette er med til at sikre kompatibilitet med flest mulige browsere. <div class="treeview"> <li><span class= node ><a href= title= >Mappe 1</a></span> <li><span class= node ><a href= title= >Mappe 2</a></span> <li><span class= node"><a href= title= >Mappe 2-1</a></span> <li><span class= node ><a href= title= >Mappe 3</a></span> Hvis en node skal fremstå som værende lukket angives klassen collapsed på elementet li. <div class="treeview"> <li class= collapsed ><span class= node > </a></span> <li><span class= node"> </span> 20

21 Node Hvert link i en node kan tilføjes en klasse, der muliggør en visuel præsentation af nodens type. Eksempel: Hvis noden er en indbakke, bruges klassen inbox. <span class= node ><a href= title= class= inbox >Indbakke</a></span> Følgende typer af noder bliver brugt: Klasse inbox drafts sentitems recyclebin searchfolder searchfolders customer mailbox Beskrivelse Mappe Ny mappe Mappefunktioner Gem på egen PC Ny meddelelse Besvar meddelelse Videresend meddelelse Flyt meddelelser Node (Valgt) Hvis en node er valgt, suppleres elementet span med klassen selected. <span class= node selected > <a href= title= class= inbox >Indbakke</a> </span> Node (Fremhævning) Hvis en node skal fremhæves (f.eks. ved ulæst post), vil elementet a have klassen highlight. Yderligere information om node (f.eks. antal ulæste dokumenter) angives i et ekstra span - element. <span class= node > <a href= title= class= inbox highlight >Indbakke <span>(2)</span></a> </span> Node (Afventer) Hvis en mappe har mulighed for undermapper, der endnu ikke er indlæst i træet, vil elementet a have klassen pending. <span class= node > <a href= title= class= pending >Mappe 1</a> </span> 21

22 Effekter Hvis musen bevæger sig over noden, suppleres elementet span med klassen node_hover. <span class= node node_hover > <a href= title= class= inbox >Indbakke</a> </span> Hvis noden er valgt, suppleres elementet span med klassen node_selected_hover. <span class= node selected node_selected_hover > <a href= title= class= inbox >Indbakke</a> </span> Gruppe Noder kan inddeles i en eller flere grupper. Her tilføjes et ekstra div -element med klassen group, hvori et eventuelt gruppenavn placeres i et div -element med klassen name. <div class= treeview > <div class= group > <div class= name >Gruppe 1 <li><a href= title= >Mappe 1</a> <li><a href= title= >Mappe 2</a> <div class= group > <div class= name >Gruppe 2 <li><a href= title= >Mappe A</a> <li><a href= title= >Mappe B</a> 22

23 Liste Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Til visning af en liste, der også kan indeholde en hierarkisk struktur benyttes et liste-element. Bemærk dette element benytter JavaScript til visuelle effekter som f.eks. det at åbne og lukke noder i træet. Dette er med til at sikre kompatibilitet med flest mulige browsere. <div class= listview > <li> <div class= item > <span class= text >Fredensborg Kommune</span> <span class= subitem >Tilmeld</span> <li> <div class= item > <span class= text >Københavns Kommune</span> <span class= subitem >Tilmeld</span> Bredder Bredden på et element i en række kan angives med klassen form, wide, short eller mini. <div class= item > <span class= text form > </span> <span class= subitem wide > </span> <span class= subitem short > </span> <span class= subitem mini > </span> Opstilling Et element i en række kan justeres mod højre margin med klassen alignright. <div class= item > <span class= text > </span> <span class= subitem short alignright > </span> 23

24 Hvis teksten i et element skal højrestilles angives dette med klassen right. <div class= item > <span class= text wide > </span> <span class= subitem alignright right > </span> Afkrydsningsfelt Hvis et afkrydsningsfelt skal vises for en række i listen suppleres item med klassen checkbox. Yderligere tilføjes et label -element med tilhørende input -element af typen checkbox. <div class= item checkbox > <label><input type= checkbox class= checkbox > <span>vælg Fredensborg Kommune</span></label> <span class= text >Fredensborg Kommune</span> <span class= subitem >Tilmeld</span> Hierarki Hvis en række kan indeholde yderligere en liste suppleres listeview med klassen show_handlers. Yderligere tilføjes et span -element med klassen handler samt et a -element til hver række, der indeholder en liste. <div class= listview show_handlers > <li> <div class= item > <span class= handler ><a href= # title= # ><span>+</span></a></span> <span class= text >Punkt 1</span> <li> <div class= item > <span class= text >Punkt 1-1</span> 24

25 Hvis en række skal fremstå som værende lukket angives klassen collapsed på elementet li. <div class= listview handler > <li class= collapsed > <div class= item > Grupper Listen kan inddeles i en eller flere grupper. Her tilføjes et ekstra div -element med klassen group, hvori et eventuelt gruppenavn placeres i et div -element med klassen name. <div class= listview > <div class= group > <div class= name >Gruppe 1 <li><div class= item > <li><div class= item > <div class= group > <div class= name >Gruppe 1-1 <li><div class= item > <li><div class= item > 25

26 Meddelelsesliste Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Når indholdet af brugers mappe skal vises bruges en meddelelsesliste. Elementet består af en punktopstilling med tilhørende underelementer til placering af oplysninger som afsender, indhold, tidsfrister, modtagelsestidspunkt etc. Bemærk dette element benytter JavaScript til visuelle effekter som f.eks. visuel markering af om emnet er valgt. Dette er med til at sikre kompatibilitet med flest mulige browsere. <div class= messages > <li> <div class= item > <label><input type= checkbox class= checkbox /> <span>vælg Forbrugsafgifter</span></label> <div class= header > <span class= sender >Fredensborg Kommune</span> <span class= recieved > </span> <div class= content > <span class= subject > <a href= title= >Forbrugsafgifter</a> </span> <span class="attachments">(2)</span> <div class= actions > <li><a href= title= >Tilføj note</a> <li class= last ><a href= title= >Information</a> Meddelelse (Status) En meddelelse markeres som værende ulæst ved at supplere item med klassen unread. <div class= item unread > En meddelelse markeres som værende besvaret ved at supplere item med klassen replied. <div class= item replied > En meddelelse markeres som værende videresendt ved at supplere item med klassen forwarded. <div class= item forwarded > Meddelelse (Valgt) En meddelelse markeres som værende valgt ved at supplere item med klassen selected. 26

27 <div class= item selected > Meddelelse (Låst) En meddelelse markeres som låst læst ved at supplere item med klassen locked. Link til selve indholdet i meddelelsen erstattes med et span -element og input -elementet sættes til disabled. <div class= item locked > <label><input type= checkbox class= checkbox disabled= disabled /> <span>vælg Forbrugsafgifter</span></label> <div class= header > <span class= sender >Fredensborg Kommune</span> <span class= received > </span> <div class= content > <span class= subject > <span class= document pdf >Forbrugsafgifter</span> </span> Effekter Hvis musen bevæger sig over en meddelelse, angives dette ved at supplere klassen item med item_hover. <div class= item item_hover > Hvis musen bevæger sig over en meddelelse, der er valgt, angives dette ved at supplere klassen item med item_selected_hover. <div class= item selected item_selected_hover > Meddelelsestyper Om en meddelelse indeholder et dokument eller servicebesked angives på linket i emnet. <div class= content > <span class= subject > <a href= title= class= document pdf >Forbrugsafgifter</a> </span> Meddelelse Hvis meddelelsen indeholder et dokument angives klassen document. Yderligere tilføjes en klasse navngivet efter typen af dokumentet (eksempel: pdf hvis dokumentet er et PDFdokument). 27

28 <span><a href= title= class= document pdf >Forbrugsafgifter</a></span> Service besked Hvis meddelelsen indeholder en servicebesked angives klassen servicemessage. <span><a href= title= class= servicemessage >Forbrugsafgifter</a></span> Funktioner En meddelelse kan indeholde en til flere mulige funktioner. <div class= messages > <div class= item > <div class= header > <div class= actions > <li><a href= # title= # >Besvar</a> <li><a href= # title= # >Videresend</a> <li><a href= # title= # >Information</a> Information En meddelelse kan indeholde en til flere informationer som f.eks. note, tidsfrist og meddelelsens placering ved en søgning. <div class= messages > <div class= item > <div class= header > <div class= info > <li><span class= label >Note:</span> Regning er betalt <li><span class= label >Tidsfrist:</span> Gruppe Emner kan inddeles i en eller flere grupper. Her tilføjes et ekstra div -element med klassen group, hvori et gruppenavn med tilhørende afkrydsningsfelt placeres i et div -element med klassen name. <div class= messages > <div class= group > 28

29 <div class= name > <label><input type= checkbox class= checkbox /> <span>vælg gruppe</span></label> <span>gruppe 1</span> <div class= group > <div class= name > <label><input type= checkbox class= checkbox /> <span>vælg alle</span></label> <span>gruppe 2</span> 29

30 Notifikationsliste Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Til visning af brugerens notifikationer benyttes elementet notifikationsliste. Elementet består af en punktopstilling placeret i et div -element med klassen notifications. <div class= notifications > <li> <span class= notification >Du er tilmeldt lønsedler fra Københavns Kommune.</span> <span class= status > kl </span> <li><a href= title= >Gå til tilmeldinger</a><li> <li class= last ><a href= title= >Fjern</a><li> <li> <span class= notification >Du har fået adgang til Niels Jensens dokumenter.</p> <span class= status > kl </span> <li><a href= title= >Gå til mine adgange</a><li> <li class= last ><a href= title= >Fjern</a><li> Tip Dette element samt tilhørende underelementer er en udvidelse af OIM CSS Som hjælp ved drag-and-drop anvendes elementet tip, hvor en på brugerens handling angives. Bemærk dette element benytter JavaScript til at aktivere elementet samt placere tippet efter markørens placering på skærmen. Tekst og berørte antal dokumenter sættes ligeledes vha. JavaScript. <div class= tooltip > <div> <div class= icon > <div class= affected > <div class= title ><span>flyt valgte dokumenter</span> 30

31 Ikoner Følgende typer af tip bliver brugt som supplement til klassen icon : folder bruges når en mappe flyttes message bruges når et emne flyttes messages bruges når flere emner flyttes mailbox bruges når en postkasse flyttes <div class= icon folder > <div class= icon message > <div class= icon messages > <div class= icon mailbox > 31