移动开发者必备工具：开源jqTouch初探

<div id="about" class="selectable"> 
   <ul> 
   <p><strong>William Shakespearestrong><br />p> 
   <p><em>William Shakespeare (baptised 26 April 1564; died 23 April 1616) was an English poet and playwright, widely regarded as the greatest writer in the English language and the world's pre-eminent dramatist. He is often called England's national poet and the "Bard of Avon". <br />em>p> 
   ul> 
   <br /><a href="#">Closea> 
div> 
 
<div id="quotes"> 
  <div class="toolbar"> 
    <h1>Quotesh1> 
    <a href="#">Homea> 
  div> 
<ul > 
    <li><a href="#quote">Slidea>li> 
    <li><a href="#quote">Slide Upa>li> 
    <li><a href="#quote">Dissolvea>li> 
    <li><a href="#quote">Fadea>li> 
    <li><a href="#quote">Flipa>li> 
    <li><a href="#quote">Popa>li> 
    <li><a href="#quote">Swapa>li> 
    <li><a href="#quote">Cubea>li> 
ul> 
div>       
<div id="quote"> 
<div class="toolbar"> 
    <h1>Quoteh1> 
    <a href="#">Homea> 
div> 
<div class="info"> 
    Better a witty fool than a foolish wit.   
div> 
div> 
 
<div id="forms"> 
<div > 
    <h1>Contact Ush1> 
    <a href="#" >Backa> 
div> 
<form> 
  <ul> 
  <li><input type="text" name="search" placeholder="Name" id="some_name" />li> 
  <li><input type="text" name="phone" placeholder="Phone" id="some_name"  />li> 
  <li><textarea placeholder="Comments" >textarea>li> 
  <li>Do you want us to contact you?<span class="toggle"><input type="checkbox" />span>li> 
  <li>What is your favorite playli> 
<select id="lol"> 
  <optgroup label="Comedies"> 
  <option value ="Much Ado About Nothing">Much Ado About Nothingoption> 
  <option value ="As You Like It">As You Like Itoption> 
    optgroup> 
    <optgroup label="Tragedies"> 
  <option value ="Hamlet">Hamletoption> 
  <option value ="Othello">Othellooption> 
    optgroup> 
select> 
  li> 
  ul> 
form> 
div> 
 
<div id="home"> 
<div> 
    <h1>Shakespeareh1> 
    <a id="infoButton" href="#about">Quote Shakespearea> 
div> 
<ul > 
    <li><a href="#about">About Shakespearea>li> 
    <li><a href="#quotes">Quotesa>li> 
    <li><a href="#forms">Contact Usa>li> 
ul> 
<h2>External Linksh2> 
<ul > 
    <li><a href="http://www.insideria.com/" target="_blank">InsideRIA.coma>li> 
ul> 
<ul> 
    <li><a href="mailto:mdavid@matthewdavid.ws" target="_blank">Email Mea>li> 
    <li><a href="tel:920-389-1212" target="_blank">Call Mea>li> 
ul> 
 
<div> 
    <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.p> 
div> 
div> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.

<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8">script> 
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8">script> 
1.
2.

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";style> 
1.

<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";style> 
1.

<script type="text/javascript" charset="utf-8"> 
            var jQT = new $.jQTouch({...}{  
             });  
                // Page animation callback events  
                $('#pageevents').  
                    bind('pageAnimationStart', function(e, info){...}{  
                         $(this).find('.info').append('Started animating ' + info.direction + '… ');  
                     }).  
                    bind('pageAnimationEnd', function(e, info){...}{  
                         $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');  
                     });  
script> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.