jQuery Mobile 基础
本帖最后由songshichao 于2011-11-2 11:07 编辑
下面文章转自网上,源链接已经找不到了,写的非常好,我正在学习这方面的东西,转过来大家一起学习哈。
jQuery Mobile
以前,我使用过jQTouch和Sencha Touch。它们各有优缺点,但是我更喜欢把注意力放在jQuery Mobile开发上。现在,我将会为您讲述如何创建一个简单的应用程序,这个应用程序只有几个页面,可以支持Twitter,带有Google Maps功能,以及一些基本的元素。让我们开始吧!
首先,我们添加框架和样式。
现在,让我们来创建页面。这里我们应该注意一下jQuery Mobile和jQTouch的相似性——整个应用程序就是一个html页面,在这个html页面中,
特殊标记的div就是这个应用程序的“页面”。在它的基础表单中,这样的“应用程序页面”如下所示:
“data-role”参数用来设置div的功能:页面,表头,页面的内容或页脚。另外,必须为data-role="page"的div设置“id”参数才能对这个应用程序进行导航。
另外一个值得一提的参数是“data-theme”。这个参数可以应用到所有的页面元素上,它可以决定使用哪个默认的样式。在这篇文档中,你可以找到一些可用的主题的例子(请查看文档)。
在我们的应用程序的主页上应该有一个菜单,菜单项分别指向使用这些例子的页面。要创建这样一个菜单,我们需要添加一个ul列表。如下所示:
ul标签的参数:
◆data-role="listview"—表示这是一个你想要应用样式的列表。
◆data-inset="true" —非全屏显示一个列表,如果你的目的刚好相反,可以把它设置成“false”。
◆data-theme="a"- 使用哪个配色方案。
jQuery Mobile包含很多列表类型:简单的,带图标的,带图像数据的,等等。在这篇文档中,你可以找到一些例子(请查阅文档)。
此外,我还想把一个设置按钮添加到工具栏上。这是很容易做到的:
Options
就像你看到的一样,这个按钮可以把你导航到个性化的页面,在“gear”样式(data-icon="gear")中,它的外观是一个图标,它位于工具栏的右边。在这个框架中,有一套预置的图标。在这篇文档中,你可以看到一些例子(请查阅文档)。
最后,主页如下所示:
现在,让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中,你可以找到可用的表单元素的完整列表(请点击查阅)。
根据指南,你应该把所有元素都放到一个特定的div中:
让我们按照这条建议来行事。现在,我们把下面这些元素放在表单上。
input域:
My name:
文本域:
About myself:
滑块,设置它的最大值,最小值和当前值:
Value this site:
选项:
Value this site:
Like
Dislike
选择器:
Tired
Happy
Sick
Sunny
现在,我们来创建一个搜索页面。它主要由两个元素构成:input域和searchresult列表。
现在,我们需要使用JavaScript,把input域绑定到keyup函数上,来填充searchresult列表。
$("#search").keyup(function(){
var res = shuffle(monthes);
var list='';
$.each(res, function(index, value) {
list+='
'+value+'
';
});
$("#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 = o[j], o[j] = x);
return o;
};
然后,我们创建了一个列表。我们应该用这种方式来创建它,因为列表项是动态地添加到这个列表中的,为了挂载样式和参数,一个框架不会再处理它们了。
然后,我们使用anywhere函数,创建一个支持Twitter的页面。首先,我们应该连接那些库:
为了得到相应的Key,你必须在这个页面中注册一下(请点击查阅)。
然后,我们创建这个页面的代码:
现在是最主要的东西了——JavaScript代码,当我们打开这个页面的时候,这些代码将会执行。要追踪这个事件,可以使用一个专门的事件——pageshow。关于其他的事件,具体可以参考(请点击查阅)。
$('#twitter_page').live('pageshow',function(event, ui){
twttr.anywhere(function(T) {
https://www.360docs.net/doc/296271778.html,er.find('andrebrov').timeline().first(20).each(function(status) {
$('div#twi_list').append('
' + https://www.360docs.net/doc/296271778.html, + ': ' + status.text + '
');
});
});
});
关于anywhere函数的使用方法,具体可以参考(请点击查阅)。当我们打开我们刚刚创建好的这个页面的时候,我们会发现,有一段时间,它一直是空白的,这是因为tweets正在载入。为了让用户知道这是怎么回事,我们将会添
加一个spinner。代码如下所示:
$('#twitter_page').live('pageshow',function(event, ui){
twttr.anywhere(function(T) {
$.mobile.pageLoading();
var j=0;
https://www.360docs.net/doc/296271778.html,er.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('
' + https://www.360docs.net/doc/296271778.html, + ': ' + status.text + '
'); j++;
if(j==1){
$.mobile.pageLoading(true);
}
});
}); });
在这篇文档中,你可以找到关于spinner,及其实用程序的详细信息(请点击查阅)。
现在,我们来创建地图页面。首先,选择合适的脚本
然后,我们创建这个页面
“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 https://www.360docs.net/doc/296271778.html,tLng(https://www.360docs.net/doc/296271778.html,titude, 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 "+https://www.360docs.net/doc/296271778.html,titude+", longitude "+location.coords.longitude);
});
});
});
最后,对于我来说,这个页面中最有趣的元素是:
完整的list-divider:
打开一个邮件客户端的链接:
EMail me 指向电话号码的链接:
Call me 关于各种链接(搜索各种链接吧,文档我也没找,用到的时候再查把),具体可以参考这里!