技术开发 频道

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

  【IT168 专稿】目前,随着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:mdavid@matthewdavid.ws" target="_blank">Email Me</a></li>
    
<li><a href="tel:920-389-1212" 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>
0
相关文章