iWebkit

iWebkit

Ryan
http://MobileDev.tw

1

1.  7.  iTunes Music List
2.  8.  iPod List
3.  9. 
4.  10. 
5.  ListView 11. 
6.  APPStore List

2

iWebKit
http://iwebkit.net/
iwebkit/iwebkit5.04.zip
Framework/index.html

What is iWebkit
iWebKit is a file package designed to help you create your own iPhone, iPod
Touch and iPad compatible website or webapp. The kit is accessible to anyone
even people without any html knowledge and is simple to understand thanks to
the included tutorials. In a couple of minutes you will have created a full and
professional looking website. iWebKit is a great tool because it is very easy to
use, extremely fast, compatible & extendable. It is simple html that anyone can
edit contrary to some other very complicated solutions based on ajax. Simplicity
is the key!

3

iWebKit – (1/3)

• 
<div id="topbar">
<div id="title">My Title</div>
</div>

• 

<div id="topbar" class="black"></div>

<div id="topbar" class="transparent"></div>

4

iWebKit – (2/3)
Arrows, buttons, tri/duobuttons
<div id="topbar">
<div id="title">Ryan iWeb</div>
<div id="leftnav">
<a href="page.html">
<img alt="home" src="images/home.png" />
</a></div>
<div id="rightnav">
<a href="page2.html">Next</a>
</div>
</div>

<div id="rightnav">
<a href="page2.html">Next</a>
<a href="page2.html">Next2</a>
</div>
5

iWebKit – (3/3)
Arrows, buttons, tri/duobuttons
<div id="topbar">
<div id="title">Ryan iWeb</div>
<div id="leftbutton">
<a href="page.html">Home</a>
</div>
<div id="rightbutton">
<a href="page2.html">Option</a>
</div>
</div>

<div id="blueleftbutton">
<a href="page.html">Home</a></div>
<div id="bluerightbutton">
<a href="page2.html">Option</a></div>
6

iWebKit – (1/2)
<div id="content">
<span class="graytitle">my title </span>
</div>

<ul class="pageitem">
<li class="textbox">
<span class="header">blue title</span>
<p>123</p>
</li>
<li class="menu">
<img alt="Desrciption" src="thumbs/other.png" />
<span class="name">Name1111111111</span>
<span class="comment">Comment</span>
<span class="arrow"></span>
</a>
</li>
</ul>
7

iWebKit – (2/2)
iTunes classic list view
<li class="store">
<span class="image" style="background-
image:url('thumbs/youtube.png')"></span>
<span class="comment">comment</span>
<span class="name">Nema</span>
<span class="stars5"></span>
<span class="starcomment">5 ratings</span>
</a>
</li>

90x90 px

8

iWebKit – (1/4)
( topbar content )
<div class="searchbox">
<form action="http://www.iiiedu.org.tw/taipei/aspro/c.asp"
method="get">
<fieldset>
<input id="search" placeholder="search" type="text"
name="qcno"/>
<input id="submit" type="hidden" />
</fieldset>
</form>
</div>

9

iWebKit – (2/4)
( <ul class="pageitem"> )

<li class="bigfield">
<input placeholder="Username" type="text" />
</li>

<li class="smallfield">
<span class="name">Name</span>
<input placeholder="Enter Text" type="text" />
</li>

<li class="textbox">
<textarea name="TextArea" rows="4"></textarea>
</li>

10

iWebKit – (3/4)
( <ul class="pageitem"> )
checkbox
<li class="checkbox">
<span class="name">my text</span>
<input name="checkbox" type="checkbox" />
</li>
radiobutton
<li class="radiobutton">
<span class="name">text</span>
<input name="GroupName" type="radio" value="A" />
</li>

<li class="select">
<select name="example">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
</li>
11

iWebKit – (4/4)
Double add
( topbar content )

<div id="doublead">
<a href="page.html" style="background-color:gray"></a>
<a href="page2.html" style="background-color:gray"></a>
</div>

background-image:url(‘pic.png’)
147x83 px

<li class="button">
<input name="name" type="submit" value="Submit input" />
</li>

12

iWebKit – ListView (1/2)
1. <body> -> <body class="list">
2. content div <ul>….</ul>
3. code <ul>…..</ul>

<li class="title">My List View</li>

<li>
<span class="name">name</span>
</a>
</li>

13

iWebKit – ListView (2/2)
( 90x90 px)
<li class="withimage">
<img alt="description" src="thumbs/ipod.png" />
<span class="name">name</span>
<span class="comment">comment</span>
</a>
</li>

14

iWebKit – Appstore List (1/2)
1. <body> -> <body class="applist">

<li>
<span class="image" style="background-image:url('pic.png')"></span>
<span class="comment">Comment111</span>
<span class="stars4"></span>
<span class="starcomment">1Rating</span>
<span class="price">$12</span>
</a>
</li>

57x57px

15

iWebKit – Appstore List (2/2)
doublead
<li id="doublead">
<a href="page.html" style="background-image:url('pic1.png')"></a>
<a href="page.html" style="background-image:url('pic1.png')"></a>
</li>
147x83px

16

iWebKit – iTunes Music List
1. <body> -> <body class="musiclist">

<ul>
<li><a href="page.html">
<span class="number">1</span>
<span class="time">(1:33)</span>
</a>
</li>
</ul>

17

iWebKit – iPod List
1. <body> -> <body class="ipodlist">

<ul>
<li><a href="page.html">
<span class="number">1</span>
<span class="auto"></span>
<span class="time">(1:33)</span>
</a>
</li>
</ul>

18

iWebKit –
<meta content="yes" name="apple-mobile-web-app-capable" />

iPhone
<meta name="apple-mobile-web-app-status-bar-style"
content="default" />
content="black" />
content="black-translucent" />

iPhone
<link rel="apple-touch-icon" href="logo.png" />
( 320x460px)
<link href="startup.png" rel="apple-touch-startup-image" />

19

iWebKit –
<meta name="format-detection" content="telephone=yes" />
(iPhone)/ (iPod Touch)
<a class="noeffect" href="tel:123-456-7890">call now</a>
Youtube
<a class="noeffect" href="http://www.youtube.com/yourvideo">Watch</a>

<a class="noeffect" href="sms:12125551212">Send</a>

<a class="noeffect" href="http://maps.google.com/?ie=UTF8&ll=...">Look Map</a>
iTune Appstore
<a class="noeffect" href="http://itunes.apple.com/us/app/zinio-magazine
-newsstand-reader/id364297166?mt=8">Open App</a>
RSS
<script src="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http://rss.news.yahoo.com/rss/topstories"
type="text/javascript"></script>

20

• 
• 
• 
•  Next Step
• 
•  PhoneGap
•  Real APP

21

iWebkit

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie iWebkit

Ähnlich wie iWebkit (20)

Mehr von Ryan Chung

Mehr von Ryan Chung (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

iWebkit