JQTouch
Fra Biblab
jQTouch
http://www.jqtouch.com/
Programmeringsspråk: JavaScript
Database:
Lisens: MIT Licence
Alternativer: iUI
jQTouch er en pakke bestående av JavaScript, CSS og bilde-elementer, som skal gjøre det enkelt å lage Web-applikasjoner som ligner på "innfødte" applikasjoner for iPhone.
Eksempel
jQTouch forventer HTML-dokumenter som ser ut omtrent som dette:
<html>
<head>
<title>Demo</title>
</head>
<body class="profile">
<div id="home">
<div class="toolbar">
<h1>Demo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#side1">Side 1</a></li>
<li class="arrow"><a href="#side2">Side 2</a></li>
<li class="arrow"><a href="#side3">Side 3</a></li>
</ul>
</div>
<div id="side1">
<div class="toolbar">
<h1>Side 1</h1>
<a class="button back" href="#">Tilbake</a>
</div>
<div>
<p>Innhold...</p>
</div>
</div>
<div id="side2">
<div class="toolbar">
<h1>Side 2</h1>
<a class="button back" href="#">Tilbake</a>
</div>
<div>
<p>Innhold...</p>
</div>
</div>
<div id="side3">
<div class="toolbar">
<h1>Side 3</h1>
<a class="button back" href="#">Tilbake</a>
</div>
<div>
<p>Innhold...</p>
</div>
</div>
</body>
</html>
I nettleseren Safari ser dette slik ut:
For å "style" dokumentet med jQTouch, legg til kode i head-elementet slik at det blir seende slik ut:
<head> <title>Demo</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style> <script type="application/x-javascript" charset="utf-8"> $.jQTouch({ statusBar: 'black', }); </script> </head>
HTML-siden har nå fått en forside:
Klikker man på "Side 1" ser det slik ut:
