<< Chapter < Page Chapter >> Page >

Sådan laver du navigeringsknapper

Knapper er centrale elementer i Jquery Mobile. Der findes to typer af knapper på jQuery Mobile: Formknapper der laves med "input" eller "button" tags og navigeringsknapper der laves med et a-tag, hvorefter Jquery Mobile automatisk optimerer knapperne til brug på mobile enheder for at give en ensartet og optimal brugeroplevelse, på tværs af mobile enheder.

Et link vil eksempelvis blive til en navigeringsknap ved at tilføje atributten data-role="button"

<a href="index.html" data-role="button">Link button</a>

Dette vil give følgende resultat:

Både navigationsknap og form knap kan styles med fx. tekst, ikoner, placering mv.

Mini version af navigeringsknap

Det er også muligt at lave en mini version af navigationsknappen til brug fx i menubarer eller hvor pladsen er trang. Dette gøres ved at tilføje data-mini="true"

Dette giver en knap der afviger fra en standard knap ved at være mere kompakt og med mindre font størrelse.

Hvordan skal koden se ud, for at lave en mere kompakt version af en navigationsknap?

<a href="index.html" data-role="button" data-mini="true">Link button</a>

Tilføjelsen af data-mini="true" kan også bruges på form knapper der ønskes i en mere kompakt version.

Prøv selv

Hvis du selv vil prøve at lave navigationsknapper i jQuery Mobile kan du se mere på (External Link)

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Introduktion til jquery mobile. OpenStax CNX. Dec 07, 2012 Download for free at http://cnx.org/content/col11460/1.1
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Introduktion til jquery mobile' conversation and receive update notifications?

Ask