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

开发 后端
jQuery的工具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元素,这些应该是大家熟知的了。

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

  以上的代码,执行后的效果如下图:

quotes

 

  在上面的代码中,唯一用到的唯一的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库,如下:

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

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

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

  而第二个css文件,如下:

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

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

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

JavaScript

 

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

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

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

  分析代码

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

代码

 

  要注意的是,在上文中,使用

标签,表明当页面第一次加载时,默认显示的首屏,记得要加上一个class为”current”的样式。

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

  1. <div id="home" class="current"> 
  2. <div class="toolbar"> 
  3. <h1>Shakespeareh1> 
  4. <a class="button slideup" id="infoButton" href="#about">Quote Shakespearea> 
  5. div> 

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

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

  1. <li class="arrow"><a href="#about">About Shakespearea>li> 

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

  1. <li class="forward"><a href="http://www.insideria.com/" target="_WebApp">InsideRIA.coma>li> 
  2. 对于iPhone,你也可以添加一个链接到你电话号码:  
  3. <li><a href="tel:920-389-1212" target="_blank">Call Mea>li> 

  添加动画

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

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

  1. <li><a href="#quote">Slidea>li> 
  2. <li><a class="slideup" href="#quote">Slide Upa>li> 
  3. <li><a class="dissolve" href="#quote">Dissolvea>li> 
  4. <li><a class="fade" href="#quote">Fadea>li> 
  5. <li><a class="flip" href="#quote">Flipa>li> 
  6. <li><a class="pop" href="#quote">Popa>li> 
  7. <li><a class="swap" href="#quote">Swapa>li> 
  8. <li><a class="cube" href="#quote">Cubea>li> 

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

  1. class="button slideup" 

  其他类似的解决方案

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

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

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

  小结

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

【编辑推荐】

  1. 犀利开发——jQuery内核详解与实践
  2. jQuery数组处理完全详解(实例演示)
责任编辑:陈贻新 来源: it168网站
相关推荐

2023-11-30 15:30:19

Python编程语言

2011-03-01 13:10:06

WebjQueryHTML 5

2014-04-18 13:20:34

Android安卓开发工具

2022-09-15 17:08:20

JavaScripWeb开发

2014-04-16 10:10:58

应用测试

2014-03-14 11:44:28

安卓开发者Android开发

2014-04-01 13:50:28

安卓Android开发者

2021-04-08 10:40:24

前端工具代码

2020-10-22 15:05:43

开发者技能工具

2013-10-30 12:51:34

2018-10-25 22:45:53

开发者技能工具

2010-08-06 13:33:29

2013-09-29 13:26:12

iOS开发者服务工具

2011-12-02 09:50:31

google

2015-03-26 10:34:02

Android开发工具

2011-04-27 13:35:26

2015-04-23 19:22:09

崩溃分析工具

2011-10-20 10:09:14

JavaScript

2011-12-12 09:59:13

JavaScript

2023-08-25 08:00:00

人工智能工具
点赞
收藏

51CTO技术栈公众号