14/02/2026
I den moderne webudvikling, især inden for mobilapplikationer og responsive designs, er brugergrænsefladen afgørende. En af de mest effektive måder at forbedre brugeroplevelsen på er ved at bruge klare og intuitive ikoner på knapper. jQuery Mobile tilbyder en robust og brugervenlig løsning til at implementere disse ikon-knapper, herunder muligheden for at skabe knapper, der udelukkende består af ikoner. Denne guide vil dykke ned i, hvordan du kan opnå dette, samt udforske de mange muligheder for tilpasning, der er tilgængelige.
jQuery Mobiles Indbyggede Ikoner
jQuery Mobile kommer med et rigt sæt af indbyggede ikoner, der kan anvendes på forskellige UI-elementer som knapper, kollapsibles, listevisninger og meget mere. Disse ikoner er tilgængelige i både SVG- og PNG-formater. Som standard anvendes SVG-ikonerne, da de leverer skarpe billeder på både standardopløsnings- (SD) og højopløsningsskærme (HD). For enheder eller browsere, der ikke understøtter SVG, falder frameworket elegant tilbage til PNG-versionerne, hvilket sikrer konsistens på tværs af platforme.
Du kan nemt tildele et ikon til en knap ved at bruge attributten data-icon. Værdien af denne attribut er navnet på ikonet, præfikset med ui-icon-. For eksempel, for at tilføje en pil til højre, ville du bruge data-icon="ui-icon-arrow-r".
Eksempler på Ikoner
Her er et udvalg af de tilgængelige ikoner:
| Ikon Navn | Visuel Repræsentation |
|---|---|
ui-icon-action | |
ui-icon-alert | |
ui-icon-arrow-d | |
ui-icon-arrow-l | |
ui-icon-arrow-r | |
ui-icon-arrow-u | |
ui-icon-camera | |
ui-icon-check | |
ui-icon-delete | |
ui-icon-edit | |
ui-icon-home | |
ui-icon-info | |
ui-icon-mail | |
ui-icon-plus | |
ui-icon-search | |
ui-icon-star | |
ui-icon-user |
Listen fortsætter med mange flere ikoner som ui-icon-gear, ui-icon-heart, ui-icon-location, ui-icon-lock, ui-icon-phone, ui-icon-refresh, ui-icon-shop, ui-icon-tag og ui-icon-video.
Oprettelse af Ikon-Kun Knapper
At skabe en knap, der kun viser et ikon uden tilhørende tekst, er en almindelig praksis for at spare plads og skabe et rent, minimalistisk design, især på mindre skærme. I jQuery Mobile opnås dette ved at tilføje attributten data-show-label="false" til dit knap-element.
Her er et simpelt eksempel på, hvordan du opretter en ikon-kun knap med en søge-ikon:
<a href="#" data-role="button" data-icon="ui-icon-search" data-iconpos="notext" data-show-label="false">Søg</a>Attributten data-iconpos="notext" er også vigtig her. Den instruerer jQuery Mobile om at skjule knapteksten og kun vise ikonet. Selvom data-show-label="false" er den primære måde at opnå dette på, sikrer data-iconpos="notext", at knappen er designet specifikt til at indeholde et ikon uden tekst.
Tilpasning af Ikoner
Udover at bruge de indbyggede ikoner, giver jQuery Mobile dig også mulighed for at integrere dine egne brugerdefinerede ikoner. Dette giver en enorm fleksibilitet til at matche din applikations visuelle identitet.
Brug af Brugerdefinerede Ikoner
Ikoner i jQuery Mobile implementeres typisk som baggrundsbilleder på et <span> element, med en baggrundsstørrelse på 18x18 pixels. For at tilføje dine egne ikoner skal du definere CSS-regler, der peger på dine ikonfiler.
Antag, at du har en brugerdefineret ikonfil kaldet myicon.svg. Du ville tilføje følgende CSS:
.ui-icon-myicon { background-image: url("path/to/your/myicon.svg"); }For at håndtere situationer, hvor SVG ikke understøttes, kan du tilføje en fallback til en PNG-version:
.ui-nosvg .ui-icon-myicon { background-image: url("path/to/your/myicon.png"); }Klassen .ui-nosvg tilføjes automatisk til <html>-elementet af jQuery Mobile, hvis browseren ikke understøtter SVG. Du skal blot sørge for at inkludere denne klasse i dine CSS-definitioner for dine brugerdefinerede ikoner.
Ikonpositionering
For knapper og link-elementer kan ikoner placeres på fire forskellige positioner: begyndelse (venstre), slut (højre), top og bund. Standardpositionen er i begyndelsen (venstre). Du kan ændre dette ved hjælp af attributten data-iconpos.
data-iconpos="left"(standard)data-iconpos="right"data-iconpos="top"data-iconpos="bottom"
For ikon-kun knapper kan du også bruge data-iconpos="notext", som vi så tidligere.
Knaptyper og Ikoner
jQuery Mobile understøtter forskellige stilarter af knapper, hvor ikoner kan integreres:
- Block buttons: Knapper, der strækker sig over hele bredden af deres container.
- Mini buttons: Mindre versioner af knapper, ideelle til pladsbegrænsede designs.
- Inline buttons: Knapper, der vises inline med andet indhold.
- Inline mini buttons: En kombination af inline og mini størrelse.
Ikoner kan placeres forskelligt afhængigt af knaptypen og dine præferencer ved hjælp af data-iconpos.
Float Ikoner
jQuery Mobile tilbyder hjælpeklasser til at få ikoner til at flyde til enten begyndelsen eller slutningen af en knap, hvilket kan være nyttigt for specifikke layoutkrav. Disse klasser er ui-widget-icon-floatbeginning og ui-widget-icon-floatend.
For eksempel, for at få et ikon til at flyde til venstre (begyndelsen) inden i en knap:
<button class="ui-btn ui-btn-icon-left ui-widget-icon-floatbeginning"><span class="ui-icon ui-icon-myicon"></span></button>Avancerede Tilpasninger
Fjernelse af Baggrundsskiven
Som standard viser jQuery Mobile ikonerne i en semi-transparent mørk cirkel. Dette sikrer god kontrast på enhver baggrundsfarve og integreres godt med jQuery Mobiles tematiske system. Hvis du foretrækker et renere look uden denne cirkel, kan du fjerne den ved at tilføje klassen ui-nodisc-icon til knapelementet eller dets container.
Eksempel på anvendelse af ui-nodisc-icon:
<a href="#" data-role="button" data-icon="ui-icon-gear" data-iconpos="notext" data-show-label="false" class="ui-nodisc-icon">Indstillinger</a>Skift mellem Sorte og Hvide Ikoner
Som standard er ikonerne hvide for at passe til det mørkere tema, der ofte bruges i mobile applikationer. Du kan skifte til et sæt af sorte ikoner ved at tilføje klassen ui-alt-icon til elementet eller dets container. Dette vil også ændre farven på baggrundsskiven, hvis den er aktiveret.
Eksempel på brug af ui-alt-icon:
<a href="#" data-role="button" data-icon="ui-icon-user" data-iconpos="notext" data-show-label="false" class="ui-alt-icon">Bruger</a>Kombination af Klasser
Du kan kombinere disse klasser for at opnå specifikke visuelle effekter. For eksempel, for at få en ikon-kun knap med et sort ikon og uden baggrundsskiven:
<a href="#" data-role="button" data-icon="ui-icon-star" data-iconpos="notext" data-show-label="false" class="ui-nodisc-icon ui-alt-icon">Favorit</a>Disse klasser kan også anvendes på listeelementer (<li>) inden i en <ul> eller <ol> for at ændre ikonerne for hvert listeelement. Ligeledes kan de anvendes på kollapsibles for at ændre ikonet i overskriften.
CSS-Only Knapper med Ikoner
jQuery Mobile giver også mulighed for at oprette knapper med ikoner, der ikke bruger Button Widget'en. Dette kan være nyttigt, hvis du har et simpelt layout eller ønsker fuld kontrol over knapens struktur.
Her er et eksempel på en link-knap med et ikon ved hjælp af CSS:
<a href="#" class="my-icon-button ui-icon-myicon"></a>Og den tilsvarende CSS:
.my-icon-button { display: inline-block; width: 30px; /* Juster efter ikonstørrelse */ height: 30px; /* Juster efter ikonstørrelse */ background-size: 18px 18px; /* Størrelsen på ikonet */ background-repeat: no-repeat; background-position: center center; border: 1px solid #ccc; /* Eksempel på kant */ border-radius: 5px; /* Eksempel på afrundede hjørner */ }Husk at definere dine ikoner som tidligere vist med .ui-icon-myicon.
Ofte Stillede Spørgsmål (FAQ)
Hvordan laver jeg en knap, der kun viser et ikon i jQuery Mobile?
Du tilføjer attributterne data-icon="[ikon-navn]", data-iconpos="notext" og data-show-label="false" til dit knap-element (f.eks. et <a> tag).
Kan jeg bruge mine egne ikoner?
Ja, du kan bruge dine egne ikoner ved at definere dem i din CSS som baggrundsbilleder og tildele dem et unikt navn, der starter med ui-icon-.
Hvordan fjerner jeg den mørke cirkel bag ikonet?
Tilføj klassen ui-nodisc-icon til knapelementet eller dets container.
Hvordan ændrer jeg ikonet fra hvidt til sort?
Tilføj klassen ui-alt-icon til knapelementet eller dets container.
Hvilke positioner kan ikoner have?
Ikoner kan placeres til venstre (begyndelse), højre (slut), top eller bund ved hjælp af attributten data-iconpos.
Konklusion
jQuery Mobile gør det ubesværet at skabe visuelt tiltalende og funktionelle ikon-knapper. Ved at udnytte de indbyggede ikoner, tilpasse deres udseende og placering, samt muligheden for at integrere egne ikoner, kan du forbedre brugeroplevelsen markant i dine mobile webapplikationer. Muligheden for at skabe ikon-kun knapper er især værdifuld for at optimere pladsen og skabe et strømlinet interface, der fungerer problemfrit på tværs af forskellige enheder.
Hvis du vil læse andre artikler, der ligner jQuery Ikon-knapper: En komplet guide, kan du besøge kategorien Mobil.