如何在jQuery Mobile上编写应用程序
创始人
2024-07-20 19:50:43
0

【51CTO译文】从jQuery Mobile出现之前,介绍过他将支持的各个平台。现在jQuery Mobile框架已经发布,虽然他出现的时间并不长,但是它的质量却有了很大的改善。实际上,它的许多子系统都已经重新编写了(为了改善代码的清晰度和性能),跨浏览器兼容性在质量上也有了很大的提升。

jQuery Mobile Project
jQuery Mobile

以前,我使用过jQTouch和Sencha Touch。它们各有优缺点,但是我更喜欢把注意力放在jQuery Mobile开发上。现在,我将会为您讲述如何创建一个简单的应用程序,这个应用程序只有几个页面,可以支持Twitter,带有Google Maps功能,以及一些基本的元素。让我们开始吧!

首先,我们添加框架和样式。

  1.  
  2.  
  3.  
  4.  

现在,让我们来创建页面。这里我们应该注意一下jQuery Mobile和jQTouch的相似性——整个应用程序就是一个html页面,在这个html页面中,特殊标记的div就是这个应用程序的“页面”。在它的基础表单中,这样的“应用程序页面”如下所示:

  1.  
  2.               ...
   
  •               ...
  •    
  •               ...
  •    
  •  
  •  
  • “data-role”参数用来设置div的功能:页面,表头,页面的内容或页脚。另外,必须为data-role="page"的div设置“id”参数才能对这个应用程序进行导航。

    另外一个值得一提的参数是“data-theme”。这个参数可以应用到所有的页面元素上,它可以决定使用哪个默认的样式。在这篇文档中,你可以找到一些可用的主题的例子(请点击查阅)。

    在我们的应用程序的主页上应该有一个菜单,菜单项分别指向使用这些例子的页面。要创建这样一个菜单,我们需要添加一个ul列表。如下所示:

    1.    
    2.                 
    3. Twitter example
    4.    
    5.                 
    6. Map example
    7.    
    8.                 
    9. Search example
    10.    
    11.                 
    12. About
    13.    
    14.  
    15.  

    ul标签的参数:

    ◆data-role="listview"— 表示这是一个你想要应用样式的列表。

    ◆data-inset="true" — 非全屏显示一个列表,如果你的目的刚好相反,可以把它设置成“false”。

    ◆data-theme="a"- 使用哪个配色方案。

    jQuery Mobile包含很多列表类型:简单的,带图标的,带图像数据的,等等。在这篇文档中,你可以找到一些例子(请点击查阅)。

    此外,我还想把一个设置按钮添加到工具栏上。这是很容易做到的:

    1. Options 
    2.  

    就像你看到的一样,这个按钮可以把你导航到个性化的页面,在“gear”样式(data-icon="gear")中,它的外观是一个图标,它位于工具栏的右边。在这个框架中,有一套预置的图标。在这篇文档中,你可以看到一些例子(请点击查阅)。

    最后,主页如下所示:

    1.    
    2.                
    3.                       Home page   
    4.                       Options   
    5.               
       
  •                  
  •                          
  •                               
  • Twitter example
  •    
  •                               
  • Map example
  •  
  • Search example
  •    
  •                               
  • About
  •    
  •                          
  •               
  •    
  •                  
  •               
  •    
  •  
  •  
  • 现在,让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中,你可以找到可用的表单元素的完整列表(请点击查阅)。

    根据指南,你应该把所有元素都放到一个特定的div中:

    1.  
     
  •  
  • 让我们按照这条建议来行事。现在,我们把下面这些元素放在表单上。

    input域:

    1. My name:   
    2.  
    3.  

    文本域:

    1. About myself:   
    2.  
    3.  

    滑块,设置它的最大值,最小值和当前值:

    1. Value this site: 
    2.  
    3.  

    选项:

    1. Value this site: 
    2.  
    3.         Like 
    4.         Dislike 
    5.    
    6.  

    选择器:

    1.  
    2.         Tired 
    3.         Happy 
    4.         Sick 
    5.         Sunny 
    6.  
    7.  

    现在,我们来创建一个搜索页面。它主要由两个元素构成:input域和searchresult列表。

    1.         
    2.         Search 
    3.          
    4.                                              
    5.          
     
  •  
  • 现在,我们需要使用JavaScript,把input域绑定到keyup函数上,来填充searchresult列表。

    1. $("#search").keyup(function(){  
    2.         var res = shuffle(monthes);  
    3.         var list='';  
    4.         $.each(res, function(index, value) {  
    5.                 list+=''+value+'
    ';  
  •         });                                                       
  •         $("#searchresult").html(list);    
  • });  
  •  
  • 关于这段代码,有几点需要说明一下。在第一行中,我们对现有的数组进行了“shuffle”。Shuffle函数如下所示:

    1. var shuffle = function(o){ //v1.0  
    2.         for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);  
    3.                 return o;  
    4.         };  
    5.  

    然后,我们创建了一个列表。我们应该用这种方式来创建它,因为列表项是动态地添加到这个列表中的,为了挂载样式和参数,一个框架不会再处理它们了。

    然后,我们使用anywhere函数,创建一个支持Twitter的页面。首先,我们应该连接那些库:

    1.  
    2.  

    为了得到相应的Key,你必须在这个页面中注册一下(请点击查阅)。

    然后,我们创建这个页面的代码:

    1.  
    2.          
    3.                 

      Simple twitter example

       
    4.          
    5.                 
    6.                  
    7.          
    8.                                           
    9.          
    10.  
    11.  

    现在是最主要的东西了——JavaScript代码,当我们打开这个页面的时候,这些代码将会执行。要追踪这个事件,可以使用一个专门的事件——pageshow。关于其他的事件,具体可以参考(请点击查阅)。

    1. $('#twitter_page').live('pageshow',function(event, ui){                                   
    2.         twttr.anywhere(function(T) {                      
    3.                 T.User.find('andrebrov').timeline().first(20).each(function(status) {                                     
    4.                         $('div#twi_list').append('

      ' + status.user.name + ': ' + status.text + '

      ');  
    5.                 });       
    6.                                                   
    7.         });                                       
    8. });  
    9.  

    关于anywhere函数的使用方法,具体可以参考(请点击查阅)。当我们打开我们刚刚创建好的这个页面的时候,我们会发现,有一段时间,它一直是空白的,这是因为tweets正在载入。为了让用户知道这是怎么回事,我们将会添加一个spinner。代码如下所示:

    1. $('#twitter_page').live('pageshow',function(event, ui){                                   
    2.         twttr.anywhere(function(T) {                      
    3.                 $.mobile.pageLoading();   
    4.                 var j=0;  
    5.                 T.User.find('andrebrov').timeline().first(20).each(function(status) {                                     
    6.                         $('div#twi_list').append('

      ' + status.user.name + ': ' + status.text + '

      ');  
    7.                         j++;  
    8.                         if (j==1){  
    9.                                 $.mobile.pageLoading(true);  
    10.                         }  
    11.                 });                                                       
    12.         });                                       
    13. });  
    14.  

    在这篇文档中,你可以找到关于spinner,及其实用程序的详细信息(请点击查阅)。

    现在,我们来创建地图页面。首先,选择合适的脚本

    1.  
    2.  
    3.  

    然后,我们创建这个页面

    1.  
    2.          
    3.                 

      Map example

       
    4.          
    5.                 
    6.                  
    7.          
    8.                                                           
    9.          
    10.  
    11.  

    “map_canvas”元素将会包含这个地图。让我们来定义它的样式:

    1. #map_canvas{  
    2.         width:100%;  
    3.         height: 100%;     
    4.         position:relative;  
    5.         top:0px;  
    6. }  
    7.  

    现在,我们添加一段JavaScript代码,这段代码可以确定当前的位置,把这个位置显示在地图的中央,然后给这个位置添加一个标记。此外,在这个标记上,我们还可以某个把某个事件绑定在它的点击操作上。

    1. $('#map_page').live('pageshow',function(event, ui){                                       
    2.         navigator.geolocation.getCurrentPosition(function(location) {                                             
    3.                 var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);  
    4.                 var myOptions = {  
    5.                         zoom: 13,  
    6.                         center: point,  
    7.                         mapTypeId: google.maps.MapTypeId.ROADMAP  
    8.                 };  
    9.                 var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);  
    10.                 var marker = new google.maps.Marker({position: point,map: map});                                                  
    11.                 google.maps.event.addListener(marker, 'click', function() {  
    12.                         alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude);  
    13.                 });  
    14.         });       
    15. });  
    16.  

    最后,对于我来说,这个页面中最有趣的元素是:

    完整的list-divider:

    1.  
    2.  

    打开一个邮件客户端的链接:

    1. EMail me
    2.  
    3.  

    指向电话号码的链接:

    1. Call me
    2.  
    3.  

    关于各种链接,具体可以参考这里!

    总结

    我们曾经对“四大主流移动Web开发框架”进行过介绍,其中jQuery Mobile项目宣布其要成为“完整的,统一的,移动UI架构”,jQuery Mobile核心项目也将继续为移动提供优化,我们也最为看好这个框架,希望本文能对大家有所帮助!

    感谢大家,这便是51CTO的独家译文《如何在jQuery Mobile上编写一个简单的应用程序》。

    原文名称:How to write a simple application on jQuery Mobile

    查看原文

    【51CTO译稿,非经授权谢绝转载,合作媒体转载请注明原文出处、作者及51CTO译稿和译者!】

     【编辑推荐】

    1. jQuery Mobile Alpha正式发布 支持所有主流平台
    2. jQuery Mobile将至 支持主流移动平台
    3. 细数六大支持智能手机的JS框架
    4. 走进四大主流移动Web开发框架

    上一篇:思科收购网络安全管理厂商Pari Networks

    下一篇:PHP企业级应用之常见缓存技术深入解读

    相关内容

    热门资讯

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