logo logo   Opbyg Web app




Den ydre del af opbygningen af en Web App er beskrevet nedenfor. Indeni hver "page" skal efterfølgende placeres relevant tekst, widgets og billeder.



HTML-side


Yderst placeres en traditionel HTML-opsætning med links til jQuery-mobile filer.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web App</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
.
.
.
</body>
</html>


Den første indlejrede linier styrer responsive. De 3 efterfølgendee linier henter 3 filer som jQuery Mobile skal anvende:
- fil med CSS-data
- fil med kode til jQuery framework og
- fil med kode til jQuery Mobile framework.


Linksene skal indsættes i den viste rækkefølge.


CSS-filen trækker også automatisk 3 andre CSS-filer med. De kan alle ses her:

x jquery.mobile-1.4.2

x jquery.mobile-1.4.2.js


App-sider (pages)


App-sider (de sider, der vises på det benyttede udstyr) er specielle derved, at de er indlagt i deres eget sæt tags placeret i <body>-delen af en HTML-fil. der kan være et ubegrænset antal af dem inde i body-en på en HTML-side. Den ydre del af en App-side opbygges således:


<div data-role="page">

<div data-role="header">
....
</div> <!-- header slut -->

<div data-role="content">
....
</div> <!-- content slut -->

<div data-role="footer">
....
</div> <!-- footer slut -->

</div> <!-- page slut -->


'header' og 'footer' er optionelle.


SPA-sider (Single page)

Der indlejres en enkelt App-side i <body>-delen af en HTML-fil.


MPA-sider (Multi page)

Der indlejres to eller flere App-sider i <body>-delen af en HTML-fil.



Link mellem pages


Links mellem sider kan placeres inde i de enkelte siders header, main eller footer (her vist i main):


<div data-role="page" id="side01">
<div data-role="content">
<a href="#side02">Side 2</a>
</div> <!-- content slut -->
</div> <!-- page slut -->

<div data-role="page" id="side02">
<div data-role="content">
<a href="#side01">Side 1</a>
</div> <!-- content slut -->
</div> <!-- page slut -->


Med "data-transition="x" kan styres, hvordan skiftet mellem sider skal foregå.


Menu


En menu (her med ekstra ikon) kan indsættes i header, main eller footer (her i header)


<div data-role="page" id="side01">
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#side01" data-icon="grid">Side 1</a></li>
<li><a href="#side02" data-icon="grid">Side 2</a></li>
</ul>
</div> <!-- navbar slut -->
</div> <!-- header slut -->
</div> <!-- page slut -->






















x
x