Joe Hewitt’s iUiThe secret to quick & sweet iPhone Web Apps

John Boxall

John Boxall

DemoCampVancouver

Examples

Objects

<ul title=“Artists” selected=“true”>

<li class=“group”>B</li>

<li>The Beatles</li>

…

</ul>

ul

<div id="settings" title="Settings" class="panel">

<h2>Playback</h2>

<fieldset>

<div class=“row”>

<label>Repeat</label>

<div class=“toggle” onclick=“…”>

<span class=“thumb”></span>

<span class=“toggleOn”>ON</span>

<span class=“toggleOff”>OFF</span>

…

Objects

panel

Objects

<form id="searchForm" class="dialog" action="search.php">

<fieldset>

<h1>Music Search</h1>

<a class="button leftButton" type="cancel">Cancel</a>

<a class="button blueButton" type="submit">Search</a>

<label>Artist:</label>

<input id="artist" type="text" name="artist"/>

…

dialog

Flow<a href=“#artists”>

<ul id=“artists”>

<a href=“#TheBeatles”>

<ul id=“TheBeatles”>

<ul id="home" title="Music" selected="true">

<li><a href="#artists">Artists</a></li>

<li><a href="#settings">Settings</a></li>

<li><a href="stats.php">Stats</a></li>

<li><a href="http://...">About</a></li>

<li>Nothing</li>

</ul>

<ul id="home" title="Music" selected="true">

<li><a href="#artists">Artists</a></li>

<li><a href="#settings">Settings</a></li>

<li><a href="stats.php">Stats</a></li>

<li><a href="http://...">About</a></li>

<li>Nothing</li>

</ul>

<ul id="home" title="Music" selected="true">

<li><a href="#artists">Artists</a></li>

<li><a href="#settings">Settings</a></li>

<li><a href="stats.php">Stats</a></li>

<li><a href="http://...">About</a></li>

<li>Nothing</li>

</ul>

CSS3 Properties

CSS3 Properties

iUihttp://code.google.com/p/iui/

iPhone Web Dev Grouphttp://groups.google.com/group/iphonewebdev

John Boxall

DemoCampVancouver

Resources: