PHP程序员站--PHP编程开发平台
 当前位置:主页 >> WAP技术 >> wap教程 >> 

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

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

来源:PHP程序员站  作者:PHP程序员站  发布时间:2011-02-11
目前,随着iphone、itouch、ipad的流行,越来越多的开发者想开发相关的应用程序。但目前,苹果只提供了Objective - C语言去编写iPhone应用程序。但可惜的是,即使苹果的总裁乔布斯吹嘘它的易用性,C语言本身是不容易学习的语言,跟开发Web网站来比更加是复杂。但是,这

目前,随着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>以上的代码,执行后的效果如下图:

 

在上面的代码中,唯一用到的唯一的HTML5的元素被采用的是“optgroup“元素。接下来,我们把这个HTML应用转变为iphone应用。

iPhone内置的浏览器是目前市场上最先进的浏览器之一。它在如 CSS、动画方面一直有相当优秀的功能,而这些功能后来才被引入到桌面的浏览器中。

接下来本文中展示的代码,需要在Safari Mac或直接在IOS设备(iPhone,iPod的或ipad)中运行。该代码运行在iOS3和iOS4上。而对于在iOS2上的运行情况,本文则未作相关测试。

首先到http://www.jqtouch.com/下载jqtouch,而jqtouch的源代码可以在

http://code.google.com/p/jqtouch/下载。同时,在该网站上,也有很多丰富的视频指导你的学习。

将下载后的jqTouch解压,其中要特别留意的是javascript文件夹和CSS/images文件夹。jqTouch其实是jQuery 的插件,可以很灵活的配置,你可以更新这些文件,但在本文中,我们使用默认的设置。

现在,我们开始将之前写好的HTML代码移植到移动设备上。在页面的head元素中添加两个JavaScript库,如下:

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

同时要引入两个CSS文件,在每一个项目中都必须引入:

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

而第二个css文件,如下:

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

这个CSS是主题文件,主题文件是很重要的。默认的主题让应用看起来象一个iPhone应用程序。当然也可以在jqTouch上下载其他主题,让应用程序看起来像一个Android风格的应用。事实上,如果你愿意,你甚至可以开发自己的CSS主题,并将其提交给jqTouch项目。

保存修改后的页面,再运行程序,你将看到如下图的效果:

 

为了让我们的应用有动画效果,有一个JavaScript函数,添加到网页的HEAD部分:

<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 + '&hellip; ');

             }).

            bind('pageAnimationEnd', function(e, info){

                 $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');

             });

</script>

以上功能使动画在网页上正确地触发。

分析代码

如果使用编辑工具,把代码折叠起来看,会十分方便,如下图:

 

要注意的是,在上文中,使用<div id=”home”>标签,表明当页面第一次加载时,默认显示的首屏,记得要加上一个class为”current”的样式。

接下来,我们观察在home这个div中,有一个div,使用了样式toolbar,如下:

<div id="home" class="current">

<div class="toolbar">

<h1>Shakespeare</h1>

<a class="button slideup" id="infoButton" href="#about">Quote Shakespeare</a>

</div>

你将看到的是,只需要这样一个简单的样式,就能在屏幕最上方产生一个iphone风格的工具栏。

接下来,你会注意到剩下的部分,都其实只是使用了HTML中的锚点进行跳转连接的。例如,要添加一个iPhone风格的右箭头,只需要添加一个样式arrow就可以了,如下:

<li class="arrow"><a href="#about">About Shakespeare</a></li>

要注意的是,如果你要连接到外部网页,则需要添加目标指令“_WebApp“,如下所示:

<li class="forward"><a href="http://www.insideria.com/" target="_WebApp">InsideRIA.com</a></li>

对于iPhone,你也可以添加一个链接到你电话号码:

<li><a href="tel:920-389-1212" target="_blank">Call Me</a></li>


添加动画

动画在iphone中实在太重要了,你可以添加溶解,转换,页面翻转等很眩的效果。

在下面的例子中,都是使用了锚点去指向同一个连接。其中每一个都使用了不同风格的动画效果。

<li><a href="#quote">Slide</a></li>

<li><a class="slideup" href="#quote">Slide Up</a></li>

<li><a class="dissolve" href="#quote">Dissolve</a></li>

<li><a class="fade" href="#quote">Fade</a></li>

<li><a class="flip" href="#quote">Flip</a></li>

<li><a class="pop" href="#quote">Pop</a></li>

<li><a class="swap" href="#quote">Swap</a></li>

<li><a class="cube" href="#quote">Cube</a></li>

当然,你可以添加更多的效果进来,一个好的实践是,你可以在按钮中实践下这些动画效果,如:

class="button slideup"

其他类似的解决方案

目前,也有两个类似的解决方案,一个是Sencha Touch,在

(http://www.sencha.com/products/touch/)中可以下载。另外一个是iUI project,

下载地址是(http://code.google.com/p/iui/),它是第一个支持iPad的框架。

小结

目前,jqTouch还是在不断发展中,还有些不完善的地方,但这些相信不是问题,由于是开源项目,希望越来越多的爱好者加入到开发中来。

 


延伸阅读:
jQuery移动版发布:支持iOS,黑莓和Android平台
2011年应关注的5项Web技术 jQuery移动版入选
2011 年移动应用程序开发新趋势
Tags: 移动开发   开源   jqTouch  
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号