(page) REDIGERET 19 November 2011 • by admin

JQuery Mobile

Hvad er JQuery Mobile:

JQuery Mobile er et html5/css3/Javascript UI-framework, der bygger på et javascript bibliotek: JQuery, der bygger på JavaScript.
Med JQuery Mobile, kan du generere fungerende mobile web applikationer uden at skrive en eneste linie javascript.
Web applikationen skrives i html, hvori elementerne navngives efter et bestemt rolle-system, hvorigennem de automatisk får en tilsigtet funktionalitet.
Da det er så nemt, kan det udover at generere websider til mobil, også kan bruges som wireframe / prototype værktøj for native applikationer.
Css-temaerne er fleksible og kan (for nyligt) genereres online.

Sidestruktur og Atributter

Øvelsen er nu, at bygge en solo “mobil.html” med dens grundstruktur, udbygge funktionaliteten med de attributter og indarbejde noget indhold.
Start med en ny html-side:

<!DOCTYPE html> 
<html> 
    <head>
        <title> Mobil side </title>
    </head> 
    <body> 
    </body>
</html>

Man skal både linke til jQuery’s javascript-fil og til jQueryMobile’s javascript-fil og også til jQueryMobile’s css-fil..
Vær opmærksom på versions-nummeret, Funktionaliteten kan variere fra den ene til den anden. Find Links til det nyeste script på jquerymobile.com.
indsæt bibliotekerne under titlen:

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

Den øverste meta-tag skal få browseren til at skalere siden til den størrelse og pixel-opløsning apparatets skærm faktisk har. Ellers sætter smartphones en hjemmesides bredde til 900px.

En enkelt “side”‘s struktur består typisk af følgende, hvori alt det egentlige indhold lægges på plads:

<div data-role="page" id="side1">
 
	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->
 
	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

Flere ‘sider’

< body> inddeles i pages, som derefter kan under-struktureres. Bemærk at alle funktioner og transitioner ikke kan opleves i en desktop browser.

page

Du kan nøjes med nogle div’er, som har attributten data-role=”page” og med id=”sidenavn” – en for hver side.
I hver af disse page-div’er, placeres indhold.

Links mellem siderne

< a href="#en-sides-id">link til siden< /a> Selve skiftet mellem sidernes ankre foregår med en transition-effekt.

header content footer

En understruktur for “pages”
data-position=”fixed” på header og footer, får dem til at blive fast ved top og bund, henholdsvis.

.

Tutorial

jquery-mobile-what-can-it-do-for-you
Det er grund-tutorial.

Typiske ændringer fra tidligere versioner:

data-add-back-btn=”true” på alle page-divs, for at få tilbageknap automatisk indlejret i headerne.

Showcase

http://www.jqmgallery.com/

Referencer

ibm.com/developerworks/web/library/wa-jqmobile/
jackbellis.com/jqm/jqm_CommandReference.html