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

1. Joe Hewitt’s iUi The secret to quick & sweet iPhone Web Apps John Boxall John Boxall DemoCampVancouver

2. Examples

3. Objects ul <ul title=“Artists” selected=“true”> <li class=“group”>B</li> <li>The Beatles</li> … </ul>

4. Objects panel <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> …

5. Objects dialog <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"/> …

6. Flow <a href=“#artists”> <ul id=“artists”> <a href=“#TheBeatles”> <ul id=“TheBeatles”>

7. <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>

8. <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>

9. <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>

10. CSS3 Properties

11. CSS3 Properties

12. Resources: iUi http://code.google.com/p/iui/ iPhone Web Dev Group http://groups.google.com/group/iphonewebdev John Boxall DemoCampVancouver