如何在jQuery Mobile上编写应用程序
首先，我们添加框架和样式。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/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" id="main_page" data-theme="b">
<div data-role="header" >
<h1 id="twi_acc">Home page</h1>
<a href="#settings" data-icon="gear" >
<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" 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="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://www.google.com/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.getElementByIdx_x("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-link-inherit">Call me</a></li>
关于各种链接，具体可以参考这里！
总结
jQuery Mobile项目宣布其要成为“完整的，统一的，移动UI架构”，jQuery Mobile核心项目也将继续为移动提供优化！
原文名称：How to write a simple application on jQuery Mobile
查看原文
