如何在jQuery Mobile上编写应用程序

Posted 2023-05-06

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

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

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

<link rel="stylesheet" href="htt  p:/  /code.jquer y.c om/mobile/1.0a2/jquery.mobile-1.0a2.m in.css" /> 
<script src="htt p:/  /code.jquer  y.c om/jquery-1.4.4.mi n.js"></script> 
<script src="ht  tp:/  /code.jquer  y.c om/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>   

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

<div data-role="page">                 <div data-role="header">...</div>                   <div data-role="content">...</div>                   <div data-role="footer">...</div>   
</div>   

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

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

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

<ul data-role="listview" data-inset="true" data-theme="a">                     <li><a href="#twitter_page">Twitter example</a></li>                     <li><a href="#map_page">Map example</a></li>                     <li><a href="#search">Search example</a></li>                     <li><a href="#about">About</a></li>   
</ul>   

ul标签的参数：

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

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

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

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

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

<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>   

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

最后，主页如下所示：

<div data-role="page" id="main_page" data-theme="b">                   <div data-role="header" >                         <h1 id="twi_acc">Home page</h1>                           <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>                   </div>                   <div data-role="content" >                           <ul data-role="listview" data-inset="true" data-theme="a">                                   <li><a href="#twitter_page">Twitter example</a></li>                                   <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>                                   <li><a href="#about">About</a></li>                           </ul>                   </div>                   <div data-role="footer">                   </div>   
</div>   

现在，让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中，你可以找到可用的表单元素的完整列表（请点击查阅）。

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

<div data-role="fieldcontain"> 
</div>   

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

input域：

<label for="name">My name:</label>   
<input type="text" name="name" id="name" value="" />   

文本域：

<label for="textarea">About myself:</label>   
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>   

滑块，设置它的最大值，最小值和当前值：

<label for="slider">Value this site:</label> 
<input type="range" name="slider" id="slider" value="0" min="-50" max="50" />   

选项：

<label for="slider2">Value this site:</label> 
<select name="slider2" id="slider2" data-role="slider">           <option value="off">Like</option>           <option value="on">Dislike</option> 
</select>     

选择器：

<select name="select-choice-1" id="select-choice-1">           <option value="standard">Tired</option>           <option value="standard">Happy</option>           <option value="standard">Sick</option>           <option value="standard">Sunny</option> 
</select>   

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

<div data-role="content" >                  <label for="search">Search</label>           <input type="search" name="password" id="search" value="" />           <ul data-role="listview" data-inset="true" id="searchresult">                                               </ul> 
</div>   

现在，我们需要使用javascript，把input域绑定到keyup函数上，来填充searchresult列表。

$("#search").keyup(function()            var res = shuffle(monthes);            var list='';           $.each(res, function(index, value)                     list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';           );                                                                $("#searchresult").html(list);     );    

关于这段代码，有几点需要说明一下。在第一行中，我们对现有的数组进行了“shuffle”。Shuffle函数如下所示：

var shuffle = function(o) //v1.0            for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);                   return o;           ;    

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

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

<script src="htt  p:/  /platform.twitte r.c om/anywhere.js?id=key_value&v=1" type="text/javascript"></script>   

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

然后，我们创建这个页面的代码：

<div data-role="page" id="twitter_page" data-theme="b">           <div data-role="header" >                   <h1>Simple twitter example</h1>           </div>           <div data-role="content" >                          <div id="twi_list"></div>           </div>           <div data-role="footer">                                            </div> 
</div>   

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

$('#twitter_page').live('pageshow',function(event, ui)                                            twttr.anywhere(function(T)                                        T.User.find('andrebrov').timeline().first(20).each(function(status)                                                                $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');                   );                                                                   );                                        );    

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

$('#twitter_page').live('pageshow',function(event, ui)                                            twttr.anywhere(function(T)                                        $.mobile.pageLoading();                     var j=0;                   T.User.find('andrebrov').timeline().first(20).each(function(status)                                                                $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');                           j++;                            if (j==1)                                   $.mobile.pageLoading(true);                                              );                                                                );                                        );    

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

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

<script type="text/javascript" src="htt  p:/  /maps.googl e.c  om/maps/api/js?sensor=true"></script> 
<script type="text/javascript" src="htt  p:/ /ww w.googl  e.c  om/jsapi"></script>   

然后，我们创建这个页面

<div data-role="page" id="map_page" data-theme="b">           <div data-role="header" >                   <h1>Map example</h1>           </div>           <div data-role="content" >                          <div id="map_canvas"></div>           </div>           <div data-role="footer">                                                            </div> 
</div>   

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

#map_canvas           width:100%;           height: 100%;              position:relative;           top:0px;       

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

$('#map_page').live('pageshow',function(event, ui)                                                navigator.geolocation.getCurrentPosition(function(location)                                                                var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);                    var myOptions =                            zoom: 13,                           center: point,                           mapTypeId: google.maps.MapTypeId.ROADMAP                   ;                    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);                    var marker = new google.maps.Marker(position: point,map: map);                                                                   google.maps.event.addListener(marker, 'click', function()                            alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude);                   );           );        );    

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

完整的list-divider：

<li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>   

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

<li><a href="mailto:[e-mail]" class="ui-link-inherit">EMail me</a></li>   

指向电话号码的链接：

<li><a href="tel:[phone]" class="ui-link-inherit">Call me</a></li>   

参考技术A

1、引入JQuery和JQueryMobile的开发库

<head>
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css"> jquerymobile样式
<script src="jquery-1.8.3.min.js"></script>  jquery库
<script src="jquery.mobile-1.3.2.min.js"></script>  jquerymobile库
</head>

2、定义page对象

<div data-role="page" id="pageone">
</div>

3、内部添加头部，底部和中间区域三部分

<div data-role="header">
    <h1>在此处插入标题</h1>
  </div>
  <div data-role="content">
    <p>在此处插入正文</p>
  </div>
  <div data-role="footer">
    <h1>在此处插入页脚文本</h1>
  </div>

4、保存成html文件就可以在手机上正常浏览显示了。

如何在 jQuery mobile 中为 phoneGap 应用程序创建相同的 whatsapp 幻灯片？

【中文标题】如何在 jQuery mobile 中为 phoneGap 应用程序创建相同的 whatsapp 幻灯片？

【英文标题】：How to create the same whatsapp slides in jQuery mobile for a phoneGap application?

【发布时间】：2015-11-24 18:46:47

【问题描述】：

我想用 phonegap 创建一个应用程序并实现这个Whatsapp slider。我不知道它的真名。可以在 jQuery 移动版中执行此操作吗？

【参考方案1】：

如果您需要精确地重新创建它，您可能会考虑使用 Angular 和 Angular 材质，因为社区已经在重新创建 Android 的材质设计方面做得很好。

https://material.angularjs.org/latest/demo/tabs

您可以使用 jQuery mobile 来创建 @Beat 提到的选项卡，但您可能需要进行大量调整才能获得精确的效果。

【参考方案2】：

当然可以。您正在寻找的是“标签”布局。 jQuery mobile 提供了一个navbar widget 供使用。如果您想看看那里，您还可以找到ionic 的示例。这对想要接触 angularjs 的初学者来说是件好事。两者都需要 phonegap/cordova。