Forstå jQuery Mobile Headers & Toolbars

I verdenen af mobil webudvikling er en intuitiv og brugervenlig grænseflade afgørende for succes. En af de mest fundamentale komponenter i enhver mobilapplikation eller responsiv webside er headeren eller topbaren. Den fungerer som et ankerpunkt for brugeren, der viser sidetitlen og ofte indeholder vigtige navigations- eller handlingsknapper. jQuery Mobile, et robust framework for at bygge mobilvenlige hjemmesider, har historisk set tilbudt en dedikeret header-widget til dette formål. Det er dog vigtigt at bemærke, at fra version 1.4.0 er funktionaliteten af den oprindelige header-widget blevet integreret og udvidet under den mere omfattende Toolbar Widget. Dette skifte afspejler en mere strømlinet tilgang til håndtering af top- og bundlinjer i applikationer, hvilket giver udviklere større fleksibilitet og konsistens på tværs af deres design.

Denne artikel vil dykke ned i, hvordan du effektivt kan udnytte jQuery Mobiles kapaciteter til at skabe og tilpasse dine sidetitler og navigationslinjer. Vi vil udforske de forskellige aspekter af header-strukturen, hvordan du tilføjer og styrer knapper, og hvordan du kan tilpasse disse elementer for at matche dit applikations design og funktionalitet. Uanset om du opdaterer et eksisterende projekt eller starter et nyt, vil en solid forståelse af disse koncepter være uvurderlig for at levere en fremragende mobiloplevelse.

Hvad er en Header-linje?

En header-linje, i konteksten af jQuery Mobile, fungerer som den primære identifikation af den aktuelle side, brugeren befinder sig på. Den er typisk det første element, der vises øverst på hver mobilside, og den har til formål at informere brugeren om sidens indhold samt give nem adgang til vigtige handlinger eller navigationsmuligheder. Udover sidetitlen kan en header-linje indeholde op til to knapper, strategisk placeret i venstre og/eller højre side af titlen. Disse knapper kan bruges til at navigere tilbage, åbne menuer, gemme indhold eller udføre andre relevante handlinger, der er specifikke for den pågældende side. Den visuelle placering øverst på siden sikrer, at brugeren altid har et klart overblik over sin position i applikationen og de tilgængelige interaktioner.

Header-struktur

Selve headeren er i bund og grund en værktøjslinje, der sidder fast øverst på siden. Den indeholder som nævnt typisk sidetitlen og valgfri knapper. En af de mest brugervenlige funktioner ved jQuery Mobile er muligheden for at positionere disse headers som faste, hvilket betyder, at de forbliver øverst på skærmen, selv når brugeren scroller ned ad siden. Dette skaber en konsistent brugeroplevelse, hvor navigation og sidens identitet altid er synlig.

Sidetitlen er normalt indkapslet i et <h1> overskriftselement, men frameworket er fleksibelt og tillader brug af ethvert overskriftsniveau fra <h1> til <h6>. Dette er særligt nyttigt for at opretholde semantisk korrekthed og tilgængelighed. For eksempel kan en applikation med flere "mobile sider" bruge et <h1> element på forsiden og <h2> elementer på de sekundære sider for at angive hierarki. På trods af de forskellige overskriftsniveauer styles de alle identisk som standard i jQuery Mobile for at opretholde visuel konsistens og et ensartet udseende på tværs af applikationen. Den grundlæggende struktur for en header ser typisk således ud:

<div data-role="header"> <h1>Side Titel</h1> </div>

Her fortæller data-role="header" jQuery Mobile, at dette <div> element skal behandles og styles som en header-linje, hvilket automatisk anvender de nødvendige CSS-klasser og JavaScript-funktionalitet for at gøre den til en fuldgyldig mobil header.

Standard Header-funktioner

Som standard er header-værktøjslinjen tema-belagt med "a"-farveprøven (swatch), som typisk er sort i det standardtema, der følger med jQuery Mobile. Denne standardfarve giver en neutral baggrund for de fleste applikationer. Det er dog utrolig nemt at tilpasse dette tema. Du kan hurtigt ændre farveprøven til en anden for at matche dit applikations farveskema eller branding ved at tilføje data-theme attributten til dit <div data-role="header"> element. For eksempel, hvis du ønsker at bruge "b"-farveprøven, som ofte er en lysere farve, ville din kode se således ud: <div data-role="header" data-theme="b">. Denne fleksibilitet giver dig fuld kontrol over det visuelle udtryk uden at skulle skrive omfattende CSS-regler.

Tilføjelse af knapper

En header ville sjældent være komplet uden knapper, der giver brugeren mulighed for at interagere med applikationen. I den standard header-konfiguration er der dedikerede pladser til knapper på hver side af sidetitlen. Hver knap er typisk et <a> (anker) element, men kan også være et <button> element, afhængigt af den specifikke funktionalitet, du ønsker at implementere. For at spare plads og give et rent mobilt udseende er knapper i værktøjslinjer som standard sat til inline-styling. Det betyder, at knappen kun er lige så bred som den tekst og de ikoner, den indeholder, hvilket optimerer pladsen på små skærme.

Standard Knap-positionering

Header-pluginet i jQuery Mobile er intelligent designet til at genkende og automatisk placere knapper baseret på deres rækkefølge i kildekoden. Det leder efter umiddelbare børn af header-containeren og tildeler automatisk det første link til den venstre knapplads og det andet link til den højre knapplads. Denne automatiske placering gør det nemt at tilføje grundlæggende navigation uden yderligere konfiguration. Overvej følgende eksempel, hvor en 'Annuller'-knap og en 'Gem'-knap er tilføjet:

<div data-role="header"> <a href="index.html" data-icon="delete">Annuller</a> <h1>Rediger Kontakt</h1> <a href="index.html" data-icon="check">Gem</a> </div>

I dette tilfælde vil 'Annuller'-knappen, som er den første <a> i kildekoden, automatisk blive vist i den venstre position, mens 'Gem'-knappen, som er den anden <a>, vil blive placeret i den højre position. data-icon attributten bruges her til at tilføje et foruddefineret ikon ved siden af knapteksten, hvilket forbedrer den visuelle forståelse og brugervenlighed.

Gør knapper visuelt fremtrædende

Selvom knapper automatisk arver farveprøven fra den bjælke, de sidder i – for eksempel vil en knap i en header med "a"-farveprøven også være stylet som en "a"-farvet knap – er det ofte ønskeligt at få specifikke knapper til at skille sig visuelt ud. Dette er især nyttigt for vigtige handlinger, som f.eks. en 'Gem'-knap. For at gøre dette er det simpelthen et spørgsmål om at tilføje data-theme attributten direkte til knap-elementet og indstille den til en anden farveprøve. Hvis du for eksempel vil have din 'Gem'-knap til at "poppe" med en "b"-farveprøve, vil koden se således ud:

<div data-role="header"> <a href="index.html" data-icon="delete">Annuller</a> <h1>Rediger Kontakt</h1> <a href="index.html" data-icon="check" data-theme="b">Gem</a> </div>

Dette lille tweak sikrer, at 'Gem'-knappen får en markant anden farve end resten af headeren, hvilket øjeblikkeligt fanger brugerens opmærksomhed og signalerer dens betydning.

Styring af knap-position med klasser

Mens den automatiske placering baseret på kildekode-rækkefølge er praktisk, kan du også opnå finere kontrol over knap-positionen ved at tilføje specifikke klasser til dine knap-ankre. Dette er især nyttigt i scenarier, hvor du kun ønsker en knap i den højre slot, eller hvis du har brug for at overskrive standardrækkefølgen. For at specificere knap-positionen manuelt, skal du blot tilføje klassen ui-btn-left for venstre position eller ui-btn-right for højre position til dit <a> element. Her er et eksempel, hvor en "Indstillinger"-knap kun placeres i højre side:

<div data-role="header"> <h1>Side Titel</h1> <a href="index.html" data-icon="gear" class="ui-btn-right">Indstillinger</a> </div>

Denne metode giver dig fuld frihed til at designe dine headers præcis, som du ønsker, uden at være bundet af kildekodens rækkefølge. Det er en kraftfuld funktion for at skabe skræddersyede layouts.

Tilføjelse af knapper til værktøjslinjer uden overskrift

I visse designscenarier vælger man måske at udelade en central overskrift i headeren. Normalt giver overskriften i header-bjælken en vis margin, der bidrager til bjælkens højde. Hvis du vælger ikke at bruge en overskrift, er det afgørende at tilføje et element med klassen class="ui-title". Dette element, selvom det er tomt eller indeholder skjult indhold, sikrer, at bjælken får den korrekte højde og vises korrekt på siden. Uden dette element kan headeren kollapse eller have uventet layout. Et typisk eksempel kunne se således ud:

<div data-role="header"> <a href="index.html" data-icon="gear" class="ui-btn-right">Indstillinger</a> <span class="ui-title" /> </div>

Dette sikrer, at din header opretholder sin tilsigtede højde og visuelle integritet, selv uden en synlig sidetitel.

Tilføjelse af Tilbage-knapper

En "tilbage"-knap er en fundamental navigationsfunktion i mobile applikationer, der giver brugeren mulighed for nemt at vende tilbage til den tidligere skærm. jQuery Mobile tilbyder en indbygget funktion til automatisk at oprette og tilføje "tilbage"-knapper til enhver header, selvom denne funktion er deaktiveret som standard. Den er særligt nyttig i "chromeless" installerede applikationer, såsom dem der kører i en indbygget app-webview, hvor browserens indbyggede tilbage-knap ikke er tilgængelig.

Frameworket genererer automatisk en "tilbage"-knap på en header, når sidens plugin's addBackBtn option er sat til true. Dette kan enten gøres programmatisk i din JavaScript-kode eller via markup ved at tilføje data-add-back-btn="true" attributten til dit side-div element. For eksempel:

<div data-role="page" data-add-back-btn="true"> <div data-role="header"> <h1>Detaljeside</h1> </div> <!-- Sideindhold --> </div>

En mere fleksibel metode er at bruge attributten data-rel="back" på et anker-element. Når der klikkes på et anker med denne attribut, efterligner det browserens tilbage-knap, går et skridt tilbage i historikken og ignorerer ankerets standard href. Dette er utrolig nyttigt, når du linker tilbage til en navngivet side, som f.eks. et link, der siger "Hjem", eller når du genererer "tilbage"-knapper med JavaScript, f.eks. en knap til at lukke en dialogboks. Når du bruger denne funktion i din kildekode, er det vigtigt at give en meningsfuld href, der faktisk peger på URL'en for den henvisende side. Dette sikrer, at funktionen stadig virker for brugere i ældre browsere (C-Grade browsers), der måske ikke fuldt ud understøtter jQuery Mobiles JavaScript-funktionalitet.

Hvis du udelukkende ønsker en omvendt transitionseffekt uden faktisk at gå tilbage i historikken (f.eks. for at give indtryk af at lukke en overlay), skal du i stedet bruge attributten data-direction="reverse". Dette giver en visuel effekt, der simulerer en tilbage-overgang, men ændrer ikke browserhistorikken.

Tilpasning af Tilbage-knap Tekst og Stil

Standardteksten for "tilbage"-knappen er typisk "Back" eller en lokaliseret version heraf. Hvis du ønsker at tilpasse teksten på tilbage-knappen, kan du gøre det på to måder: enten ved at bruge data-back-btn-text="forrige" attributten på dit side-element, eller ved at indstille det programmatisk via sidens plugin-indstillinger: $.mobile.page.prototype.options.backBtnText = "forrige";

Ligeledes kan du konfigurere tilbage-knappens tema (farveprøve) ved at bruge $.mobile.page.prototype.options.backBtnTheme = "a";. Hvis du foretager disse programmatiske ændringer, er det vigtigt at gøre det inde i mobileinit event-handleren for at sikre, at indstillingerne anvendes, før jQuery Mobile initialiseres fuldt ud.

Brugerdefinerede Header-konfigurationer

Der kan opstå situationer, hvor du har brug for at skabe en header, der afviger fra den standardkonfiguration, som jQuery Mobile tilbyder. Hvis du for eksempel har et meget specifikt layout eller kompleks interaktion, der ikke passer ind i de foruddefinerede knap-slots, kan du nemt omgå den automatiske knap-logik. Dette gøres ved simpelthen at pakke dit brugerdefinerede markup ind i en hvilken som helst container, såsom et <div>, inden for din data-role="header". Når indholdet er pakket ind, vil pluginet ikke anvende sin automatiske knap-placering, hvilket giver dig fuld frihed til at skrive dine egne tilpassede stilarter for layout af indholdet i din header.

For eksempel, hvis du ønsker at have flere knapper eller en unik placering, kan du oprette din egen interne struktur:

<div data-role="header"> <div class="my-custom-header-content"> <a href="#">Min Venstre Knap</a> <h2>Min Brugerdefinerede Titel</h2> <a href="#">Min Højre Knap</a> </div> </div>

Her kan du så anvende dine egne CSS-regler til .my-custom-header-content og de interne elementer for at opnå det ønskede layout.

Alternativ til Header-data-role

Det er også muligt at skabe brugerdefinerede bjælker helt uden at bruge data-role="header" attributten. Dette er især nyttigt, hvis du har brug for en generisk "bjælke" til meddelelser, reklamer eller andre formål, der ikke nødvendigvis er en sidetitel. Du kan starte med enhver container, f.eks. et <div>, og blot tilføje klassen ui-bar for at anvende standard bjælke-padding og yderligere tilføje en farveprøve-klasse som ui-bar-b for at tildele bjælkens farveprøve-stilarter fra dit tema. ("b" kan være ethvert farveprøve-bogstav, "a", "b", "c", "d", "e", osv.).

<div class="ui-bar ui-bar-b"> <h3>Jeg er bare en div med bjælke-klasser og en mini inline <a href="#" data-role="button" data-mini="true">Knap</a></h3> </div>

Det er vigtigt at bemærke, at .ui-bar ikke bør tilføjes til header- eller footer-bjælker, der strækker sig over hele sidens bredde. Årsagen er, at den ekstra padding, som .ui-bar klassen tilføjer, kan få et fuld-bredde element til at bryde ud af sin forældrecontainer og forårsage uønsket horisontal scrolling eller layoutproblemer. Hvis du har brug for at tilføje padding inde i en fuld-bredde værktøjslinje (f.eks. en data-role="header"), skal du i stedet pakke værktøjslinjens indhold ind i et element (f.eks. et <div>) og anvende paddingen på dette indre element. Dette sikrer, at layoutet forbliver intakt og responsivt.

Ofte Stillede Spørgsmål (FAQ)

Hvad er forskellen mellem header-widget og toolbar-widget i jQuery Mobile?

Før jQuery Mobile 1.4.0 eksisterede en specifik "header-widget". Fra version 1.4.0 er funktionaliteten af header-widgeten blevet konsolideret og udvidet under den mere generelle "toolbar-widget". Dette betyder, at når du bruger data-role="header", anvender jQuery Mobile nu toolbar-widgetens logik og styling, hvilket giver en mere ensartet tilgang til både top- og bundbjælker i din mobile applikation. I praksis betyder det, at du stadig bruger data-role="header", men dens underliggende implementering er nu en del af toolbar-systemet.

Kan jeg bruge et andet overskriftsniveau end H1 i min header?

Ja, absolut! Selvom <h1> er standard og ofte anbefalet for semantisk korrekthed som sidens primære titel, understøtter jQuery Mobile alle overskriftsniveauer fra <h1> til <h6> i dine headers. De vil alle blive stylet identisk som standard for at opretholde et ensartet udseende, uanset hvilket niveau du vælger. Dette giver dig fleksibilitet til at organisere din sides indholdshierarki korrekt, selv inden for headeren.

Hvordan placerer jeg en knap kun i højre side af headeren?

For at placere en knap specifikt i højre side af din header uden at skulle placere en tom knap i venstre side, skal du tilføje klassen class="ui-btn-right" til dit anker-element (<a>). For eksempel: <a href="index.html" data-icon="gear" class="ui-btn-right">Indstillinger</a>. Dette overskriver standard adfærden med at placere den første knap til venstre og den anden til højre.

Hvordan laver jeg en "tilbage"-knap i jQuery Mobile?

Du kan oprette en "tilbage"-knap ved at tilføje data-rel="back" attributten til et anker-element i din header. For eksempel: <a href="#" data-rel="back" data-icon="arrow-l">Tilbage</a>. Dette får knappen til at efterligne browserens tilbage-funktionalitet. Alternativt kan du indstille data-add-back-btn="true" på din side-div, og jQuery Mobile vil automatisk generere en tilbage-knap.

Kan jeg lave en header uden en synlig overskrift?

Ja, det kan du. Hvis du vælger at udelade et <h1> (eller andet <h> element) fra din header, skal du tilføje et tomt <span> element med klassen class="ui-title" indeni din data-role="header"-container. Dette element hjælper med at opretholde den korrekte højde og styling af headeren, selv når der ikke er en synlig overskriftstekst. For eksempel: <div data-role="header"><span class="ui-title" /></div>.

Hvis du vil læse andre artikler, der ligner Forstå jQuery Mobile Headers & Toolbars, kan du besøge kategorien Teknologi.