本文介绍如何使用jQuery Mobile框架创建一款移动应用，该应用帮助用户根据口味选择餐馆，并提供了从选择口味到查看餐馆详情的完整流程。
随着智能手机的普遍应用，越来越多的公司把生意搬到了移动手机端，当然基于手机的本地应用开发不是很便宜，需要有指定平台的开发技能及其相关的代码编写工具，例如，iOS开发和Andriod开发。
当 然，其实我们也有另外一个选择，创建一个基于web浏览器的应用，就和我们开发网站一样，我们可以开发基于智能手机的web应用，相关的技术就是 HTML，CSS，javascript等，典型的浏览器端的开发，只要你的智能手机拥有浏览器，你就可以方便的浏览。跨平台，而且跨设备，开发成本也相 对较低。
作为成功的javascript框架，jQuery已经存在了不短时间了。但是jQuery是基于浏览器的应用。随着手机应用的发 展，jQuery mobile逐渐的进入我们的开发视野。它能有有效的帮助开发人员创建类似iphone的应用的web应用。支持众多平台和设备。
在今天这个jQuery Mobile教程中，我们将创建一个超棒的移动应用程序，介绍如何使用jQuery Mobile来开发一个餐馆选择/浏览的手机应用。
迷你应用的主要概念：餐厅选择应用
我们将会创建一个应用帮助使用者来基于不同的口味来选择餐厅。注意这个仅仅是一个前端的设计，如果你需要和后台交互，你需要自己实现相关的AJAX调用。
应用构思
首页：选择口味
在这个页面我们提供用户选择餐厅口味的页面，你可以选择pizza，sushis或者其它你喜欢的口味和风格。 每一个选择都是将你引入另外一个页面，你可以选择餐厅位置。
页面二：选择一个城市
在这里页面中，我们可以选择餐馆所在的城市。所有的城市都现在在一个可以点击的列表中。并且每个列表选项都有一个城市餐馆数量的气饱显示。因为城市的选择非常多，这里我们添加一个过滤框，你可以输入相关的城市名称，帮助用户缩小查看范围。
然后你可以点击选择，将会进入另外一个页面，餐厅选择
页面三：选择一个餐厅
这个页面中，你可以选择你喜欢的餐厅，选择后进入餐厅详细页面
页面四：餐厅的详细介绍
包括3个部分：餐厅详细，联系方式及其食客评级，如图。
创建应用基础架构
基本jQuery mobile代码
代码如下：
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8">
<title>Restaurant Picker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>
首先大家看到我们这里使用HTML doctype。因为jQuery mobile大量使用了HTML5的data-html5属性。其次这里我们看到meta name=viewport标签。使用这个标签我们获得更好的对于可视范围的控制。不使用这个标签的话，浏览器将会挤压我们整个页面布局，看起来非常丑陋。使用width=device width，将会使得应用根据设备尺寸来显示。initial-scale属性用来控制初始的缩放层次。初始为“1”，说明原始大小，没有缩放。
接下来是css调用。早期的jQuery mobile使用多个CSS，1.0版本使用一个CSS。
最后是，jQuery和jQuery mobile类库调用。
首页：选择口味
下面我们看看第一个页面内容：
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div id="branding">
<h1>Restaurant Picker </h1>
</div>
<div class="choice_list">
<h1> What would you'd like to eat? </h1>
<ul data-role="listview" data-inset="true" >
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li>
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li>
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li>
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li>
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li>
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li>
</ul>
</div>
</div>
</div><!-- /page -->
</body>
</HTML>
jQuery mobile将HTML document和页面区分开来。一个jQuery mobile可以由一个HTML document组成，但是拥有很多的页面(multiple pages)。使用data-role="page"属性每一个页面将会使用anchor来联系起来。每一个都拥有一个data-role="page"来定义页面。这里我们将针对每一个页面创建一个HTML document。页面效果如下：
页面二：选择一个城市
这个页面显示一个城市列表。代码如下：
<body>
<div id="choisir_ville" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1> Restaurant Picker</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1> In which town do you want to eat? </h1>
<ul data-role="listview" data-inset="true" data-filter="true" >
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li>
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li>
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li>
…
</ul>
</div>
</div>
</div><!-- /page -->
</body>
以上代码中，我们修改了id，这样jQuery mobile就会将这个页面当做一个另外一个页面。注意我们使用data-add-back-btn="true"在标题栏(title bar)上生成一个”返回“按钮。
同时我们使用data-role="header"创建一个标题栏。
为了添加过滤框，我们简单的添加一个filer="true"到ul元素。注意这是个过滤框，不是一个搜索框。
最后一个技巧就是添加右边的气饱显示。我们使用带有clas的span来创建数字。以下是页面二效果：
页面三：选择一个餐厅
代码：
<body>
<div id="choisir_restau" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1> Restaurant Picker</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1> Please choose a restaurant.</h1>
<ul data-role="listview" data-inset="true" >
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li>
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li>
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li>
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li>
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li>
</ul>
</div>
</div>
</div><!-- /page -->
</body>
这个页面非常简单，除了标题栏和用户评级。这里我们使用不同的样式例如，.one,.two,.three来定义星级评定，但是现在我们先不添加样式。
以下是页面三效果：
页面四：餐厅的详细介绍
这个页面主要包含了3个部分：餐馆详细介绍，联系人信息和用户评级。代码如下：
<body>
<div id="restau" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1> Restaurant Picker</h1>
</div>
<div data-role="content">
<div class="ui-grid-a" id="restau_infos">
<div class="ui-block-a">
<h1> Le Mouffetard</h1>
<p><strong> Restaurant bar in the center of Strasbourg</strong></p>
<p> On the menu: </p>
<ul>
<li> Milkshake with chocolat</li>
<li> Planchettes </li>
<li> Leek pie </li>
</ul>
</div>
<div class="ui-block-b">
<p><img src="restau01.jpg" alt="jeannette photo"/></p>
<p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p>
</div>
</div><!-- /grid-a -->
<hr/>
<div class="ui-grid-a" id="contact_infos">
<div class="ui-block-a">
<h2> Contact us</h2>
<p>30 Rue des Tonneliers</p>
<p> 67000 Strasbourg </p>
</div>
<div class="ui-block-b">
<img src="01_maps.jpg" alt="plan jeanette"/>
</div>
</div><!-- /grid-a -->
<div id="contact_buttons">
<a href="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role="button" data-icon="maps"> Find us on Google Maps </a>
<a href="tel:0388161072" data-role="button" data-icon="tel"> Call us </a>
</div>
<hr/>
<div id="notation">
<form>
<label for="select-choice-0" class="select"><h2> User rating </h2></label>
<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >
<option value="one" class="one"> Not good at all </option>
<option value="two" class="two">Average </option>
<option value="three" class="three">Pretty good </option>
<option value="four" class="four"> Excellent </option>
</select>
</form>
</div>
</div>
</div><!-- /page -->
</body>
在这个页面中，我们使用双列元素。为了创建俩个列的区域(two column block)，我们使用俩个子区域来实现。为了给餐馆网站添加一个漂亮按钮，我们使用data-role="button"到href元素。并且添加rel="external"这样jQuery mobile不会使用ajax方式打开这个link，因为是一个外部的link。
对于联系人页面，我们依旧使用双列元素。重点要指出的是按钮，这里我们使用data-icon="maps"和data-icon="tel"来添加自定义的按钮。
最有意思的部分在于google maps链接，如果你使用智能手机，如果你允许使用Google map打开，那么将会使用Googlemap来打开链接。另外一个有趣的是电话号码，如果你使用 href=tel:0388161072类似协议。你可以直接拨通电话。是不是很酷？
最后一个是用户评级。这里我们使用select menu。data-native-menu="false"保证我们使用jQuery mobile的样式。这样我们可以添加更多的星状。
以上使得这个应用看起来非常手机范儿。下一部分我们将添加样式美化这个应用。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
