鲨鱼网
移动开发者必备工具：开源jqTouch初探
创始人
2024-07-20 02:01:03
0次

    目前，随着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.  
  2.    
       
    •    
      William Shakespeare
       
    •    
      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". 
       
    •    
     
  3.    Close 
 
  •  
  •  
  •    
  •     

    Quotes

     
  •     Home 
  •   
    •  
  •  
  •     
  • Slide
    •  
  •     
  • Slide Up
    •  
  •     
  • Dissolve
    •  
  •     
  • Fade
    •  
  •     
  • Flip
    •  
  •     
  • Pop
    •  
  •     
  • Swap
    •  
  •     
  • Cube
    •  
  •  
  •        
  •  
  •  
  •     

    Quote

     
  •     Home 
  •  
  •  
  •     Better a witty fool than a foolish wit.   
  •  
  •  
  •  
  •  
  •  
  •     

    Contact Us

     
  •     Back 
  •  
  •  
  •   
       
    •   
      •  
    •   
      •  
    •   
      •  
    •   
    • Do you want us to contact you?
      •  
    •   
    • What is your favorite play
      •  
    •  
    •    
    •   Much Ado About Nothing 
    •   As You Like It 
    •      
    •      
    •   Hamlet 
    •   Othello 
    •      
    •  
    •   
      •  
    •   
     
  •  
  •  
  •  
  •  
  •  
  •     

    Shakespeare

     
  •     Quote Shakespeare 
  •  
  •  
  •     
  • About Shakespeare
    •  
  •     
  • Quotes
    •  
  •     
  • Contact Us
    •  
  •  

  • External Links

     
  •  
  •     
  • InsideRIA.com
    •  
  •  
    •  
    •     
    • Email Me
      •  
    •     
    • Call Me
      •  
     
  •  
  •  
  •     

    Add this page to your home screen to view the custom icon, startup screen, and full screen mode.

     
  •  
  •  

    　　以上的代码，执行后的效果如下图：

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

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

    1. @import "jqtouch/jqtouch.min.css"; 

    　　而第二个css文件，如下：

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

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

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

    JavaScript

     

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

    1.  

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

    　　分析代码

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

    代码

     

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

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

    1.  
    2.  
    3. Shakespeare
       
    4. Quote Shakespeare 
    5.  

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

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

    1. About Shakespeare
      2.  

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

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

    　　添加动画

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

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

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

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

    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数组处理完全详解(实例演示)

    上一篇：Linux下logrotate 配置

    下一篇：分析师：AMD CEO辞职“令人震惊”

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说，“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]　　北京时间4月25日消息，据国外媒体报道，全球知名的云平台公司Akamai Te...