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

目前，随着iphone、itouch、ipad的流行，越来越多的开发者想开发相关的应用程序。但目前，苹果只提供了Objective - C语言去编写iPhone应用程序。但可惜的是，即使苹果的总裁乔布斯吹嘘它的易用性，C语言本身是不容易学习的语言，跟开发Web网站来比更加是复杂。但是，这一切将发生变化，因为jQuery的工具jqTouch出现了。

　　jqTouch是一个开放源码的jQuery的Ajax库，使你可以很容易地建立和优化iPhone的相关应用，它还适用于建立其它有触摸功能的设备的应用，如google的Android应用。可以在http://www.jqtouch.com/上下载到jqtouch。

　　你可以在该网站上观看jqTouch的演示，但你会发现用普通的浏览器无法正常浏览其中的不少功能，这是因为演示使用jqTouch其实是为iPhone等设备进行过优化和改造的，其中不少触摸事件和动画效果在普通的IE浏览器中无法实现(甚至在FireFox4中),但你可以在Mac上或者Safari浏览器上看到其效果。

　　开始使用jqTouch

　　使用jqTouch的目的使构建基于iPhone的应用变的容易，而所有的只需要一点HTML，CSS和一些JavaScript知识。下面我们先从一个基本的网页开始做个例子，下面的代码中使用的只是DIV和UL /the LI元素，这些应该是大家熟知的了。
<div id="about" class="selectable">
   <ul>
   <p><strong>William Shakespeare</strong><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="#">Close</a>
</div>

<div id="quotes">
  <div class="toolbar">
    <h1>Quotes</h1>
    <a href="#">Home</a>
  </div>
<ul >
    <li><a href="#quote">Slide</a></li>
    <li><a href="#quote">Slide Up</a></li>
    <li><a href="#quote">Dissolve</a></li>
    <li><a href="#quote">Fade</a></li>
    <li><a href="#quote">Flip</a></li>
    <li><a href="#quote">Pop</a></li>
    <li><a href="#quote">Swap</a></li>
    <li><a href="#quote">Cube</a></li>
</ul>
</div>   
<div id="quote">
<div class="toolbar">
    <h1>Quote</h1>
    <a href="#">Home</a>
</div>
<div class="info">
    Better a witty fool than a foolish wit.
</div>
</div>

<div id="forms">
<div >
    <h1>Contact Us</h1>
    <a href="#" >Back</a>
</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 play</li>
<select id="lol">
  <optgroup label="Comedies">
  <option value ="Much Ado About Nothing">Much Ado About Nothing</option>
  <option value ="As You Like It">As You Like It</option>
    </optgroup>
    <optgroup label="Tragedies">
  <option value ="Hamlet">Hamlet</option>
  <option value ="Othello">Othello</option>
    </optgroup>
</select>
  </li>
  </ul>
</form>
</div>

<div id="home">
<div>
    <h1>Shakespeare</h1>
    <a id="infoButton" href="#about">Quote Shakespeare</a>
</div>
<ul >
    <li><a href="#about">About Shakespeare</a></li>
    <li><a href="#quotes">Quotes</a></li>
    <li><a href="#forms">Contact Us</a></li>
</ul>
<h2>External Links</h2>
<ul >
    <li><a href="http://www.insideria.com/" target="_blank">InsideRIA.com</a></li>
</ul>
<ul>
    <li><a href="mailto:[e-mail]" target="_blank">Email Me</a></li>
    <li><a href="tel:[phone]" target="_blank">Call Me</a></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>未完 转：http://tech.it168.com/a2011/0107/1147/000001147855.shtml