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

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

成都创新互联专业为企业提供屏边网站建设、屏边做网站、屏边网站设计、屏边网站制作等企业网站建设、网页设计与制作、屏边企业网站模板建站服务，10余年屏边做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

　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.  
    2. 
  
  
  
  
  2.    
       
  
  
  
  
    •    
      William Shakespeare strong> p> 
      • 
  
  
  
  
    •    
      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".  em> p> 
      • 
  
  
  
  
    •     ul> 
      • 
  
  
  
  
    •    Close a> 
      • 
  
  
  
  
    •  div> 
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •    
      • 
  
  
  
  
    •     
      Quotes h1> 
      • 
  
  
  
  
    •     Home a> 
      • 
  
  
  
  
    •    div> 
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •     
    • Slide a> li> 
      • 
  
  
  
  
    •     
    • Slide Up a> li> 
      • 
  
  
  
  
    •     
    • Dissolve a> li> 
      • 
  
  
  
  
    •     
    • Fade a> li> 
      • 
  
  
  
  
    •     
    • Flip a> li> 
      • 
  
  
  
  
    •     
    • Pop a> li> 
      • 
  
  
  
  
    •     
    • Swap a> li> 
      • 
  
  
  
  
    •     
    • Cube a> li> 
      • 
  
  
  
  
    •  ul> 
      • 
  
  
  
  
    •  div>       
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •     
      Quote h1> 
      • 
  
  
  
  
    •     Home a> 
      • 
  
  
  
  
    •  div> 
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •     Better a witty fool than a foolish wit.   
      • 
  
  
  
  
    •  div> 
      • 
  
  
  
  
    •  div> 
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •     
      Contact Us h1> 
      • 
  
  
  
  
    •     Back a> 
      • 
  
  
  
  
    •  div> 
      • 
  
  
  
  
    •  
      • 
  
  
  
  
    •   
         
  
  
  
  
      •   
      •  li> 
        • 
  
  
  
  
      •   
      •  li> 
        • 
  
  
  
  
      •   
      •  textarea> li> 
        • 
  
  
  
  
      •   
      • Do you want us to contact you? span> li> 
        • 
  
  
  
  
      •   
      • What is your favorite play li> 
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •    
        • 
  
  
  
  
      •   Much Ado About Nothing option> 
        • 
  
  
  
  
      •   As You Like It option> 
        • 
  
  
  
  
      •      optgroup> 
        • 
  
  
  
  
      •      
        • 
  
  
  
  
      •   Hamlet option> 
        • 
  
  
  
  
      •   Othello option> 
        • 
  
  
  
  
      •      optgroup> 
        • 
  
  
  
  
      •  select> 
        • 
  
  
  
  
      •    li> 
        • 
  
  
  
  
      •    ul> 
        • 
  
  
  
  
      •  form> 
        • 
  
  
  
  
      •  div> 
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •     
        Shakespeare h1> 
        • 
  
  
  
  
      •     Quote Shakespeare a> 
        • 
  
  
  
  
      •  div> 
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •     
      • About Shakespeare a> li> 
        • 
  
  
  
  
      •     
      • Quotes a> li> 
        • 
  
  
  
  
      •     
      • Contact Us a> li> 
        • 
  
  
  
  
      •  ul> 
        • 
  
  
  
  
      • External Links h2> 
        • 
  
  
  
  
      •  
        • 
  
  
  
  
      •     
      • InsideRIA.com a> li> 
        • 
  
  
  
  
      •  ul> 
        • 
  
  
  
  
        •  
  
  
  
  
        •     
        • Email Me a> li> 
          • 
  
  
  
  
        •     
        • Call Me a> li> 
          • 
  
  
  
  
        •  ul> 
          • 
  
  
  
  
        •  
          • 
  
  
  
  
        •  
          • 
  
  
  
  
        •     
          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库，如下：

 
 
 
 
    
  
  
  
  
  1.  script> 
    2. 
  
  
  
  
  2.  script> 
    3.

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

 
 
 
 
    
  
  
  
  
  1. @import "jqtouch/jqtouch.min.css"; style> 
    2.

　　而第二个css文件，如下：

 
 
 
 
    
  
  
  
  
  1. @import "themes/jqt/theme.min.css"; style> 
    2.

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

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

 

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

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

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

　　分析代码

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

 

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

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

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

  
 
 
 
    
   
  
  
  
  1.  
    2. 
   
  
  
  
  2.  
    3. 
   
  
  
  
  3. Shakespeare h1> 
    4. 
   
  
  
  
  4. Quote Shakespeare a> 
    5. 
   
  
  
  
  5.  div> 
    6.

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

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

  
 
 
 
    
   
  
  
  
  1. About Shakespeare a> li> 
    2.

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

  
 
 
 
    
   
  
  
  
  1. InsideRIA.com a> li> 
    2. 
   
  
  
  
  2. 对于iPhone，你也可以添加一个链接到你电话号码：  
    3. 
   
  
  
  
  4. Call Me a> li> 
    5.

　　添加动画

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

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

  
 
 
 
    
   
  
  
  
  2. Slide a> li> 
    3. 
   
  
  
  
  4. Slide Up a> li> 
    5. 
   
  
  
  
  6. Dissolve a> li> 
    7. 
   
  
  
  
  8. Fade a> li> 
    9. 
   
  
  
  
  10. Flip a> li> 
    11. 
   
  
  
  
  12. Pop a> li> 
    13. 
   
  
  
  
  14. Swap a> li> 
    15. 
   
  
  
  
  16. Cube a> li> 
    17.

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

  
 
 
 
    
   
  
  
  
  1. class="button slideup" 
    2.

　　其他类似的解决方案

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

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

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

　　小结

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

名称栏目：移动开发者必备工具：开源jqTouch初探
文章地址：http://www.mswzjz.cn/qtweb/news39/5689.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

定制网站知识

同城分类信息

移动机房服务器托管　　 　成都微信小程序　　 　攀枝花网站建设　　 　成都酒店服定制　　 　成都商城app开发　　 　成都网络营销　　 　蓬安网站建设　　 　成都网站制作　　 　vi形象设计　　 　达州网站建设　　 　bgp多线机房托管　　 　成都网站建设公司　　 　中国电信西部信息中心机房　　 　友益建筑机械凿　　 　阿坝州网站建设　　 　主机租用　　 　节能环保网站建设方案　　 　成都400电话　　 　做网站的公司　　 　网站空间