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

1、.：.；如何在jQuery Mobile上编写运用程序51CTO将会为您讲述如何在jQuery Mobile框架上创建一个简单的运用程序，这个运用程序只需几个页面，可以支持Twitter，带有Google Maps功能，以及一些根本的元素。【51CTO译文】从 HYPERLINK mobile.51cto/news-219166.htm jQuery Mobile出现之前，引见过他将支持的各个平台。如今jQuery Mobile框架曾经发布，虽然他出现的时间并不长，但是它的质量却有了很大的改善。实践上，它的许多子系统都曾经重新编写了为了改善代码的明晰度和性能，跨阅读器兼容性在质量上也有了很大的

2、提升。jQuery Mobile以前，我运用过jQTouch和Sencha Touch。它们各有优缺陷，但是我更喜欢把留意力放在jQuery Mobile开发上。如今，我将会为您讲述如何创建一个简单的运用程序，这个运用程序只需几个页面，可以支持Twitter，带有Google Maps功能，以及一些根本的元素。让我们开场吧！首先，我们添加框架和款式。如今，让我们来创建页面。这里我们应该留意一下jQuery Mobile和jQTouch的类似性整个运用程序就是一个html页面，在这个html页面中，特殊标志的div就是这个运用程序的“页面。在它的根底表单中，这样的“运用程序页面如下所示：. .

3、. “data-role参数用来设置div的功能：页面，表头，页面的内容或页脚。另外，必需为data-role=page的div设置“id参数才干对这个运用程序进展导航。另外一个值得一提的参数是“data-theme。这个参数可以运用到一切的页面元素上，它可以决议运用哪个默许的款式。在这篇文档中，他可以找到一些可用的主题的例子请 HYPERLINK jquerymobile/demos/1.0a2/ l docs/pages/pages-themes.html 点击查阅。在我们的运用程序的主页上应该有一个菜单，菜单项分别指向运用这些例子的页面。要创建这样一个菜单，我们需求添加一个ul列表。如下

4、所示： Twitterexample Mapexample Searchexample About ul标签的参数：data-role=listview 表示这是一个他想要运用款式的列表。data-inset=true 非全屏显示一个列表，假设他的目的刚好相反，可以把它设置成“false。data-theme=a- 运用哪个配色方案。jQuery Mobile包含很多列表类型：简单的，带图标的，带图像数据的，等等。在这篇文档中，他可以找到一些例子请 HYPERLINK jquerymobile/demos/1.0a2/ l docs/lists/index.html 点击查阅。此外，我还想把一

5、个设置按钮添加到工具栏上。这是很容易做到的：Options就像他看到的一样，这个按钮可以把他导航到个性化的页面，在“gear款式data-icon=gear中，它的外观是一个图标，它位于工具栏的右边。在这个框架中，有一套预置的图标。在这篇文档中，他可以看到一些例子请 HYPERLINK jquerymobile/demos/1.0a2/ l docs/buttons/buttons-icons.html 点击查阅。最后，主页如下所示： Homepage Options Twitterexample MapexampleSearchexample About 如今，让我们来创建其他的页面。我们将

6、会把留意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中，他可以找到可用的表单元素的完好列表请 HYPERLINK jquerymobile/demos/1.0a2/ l docs/forms/index.html 点击查阅。根据指南，他应该把一切元素都放到一个特定的div中：让我们按照这条建议来行事。如今，我们把下面这些元素放在表单上。input域：Myname: 文本域：Aboutmyself: 滑块，设置它的最大值，最小值和当前值：Valuethissite:选项：Valuethissite:LikeDislike 选择器：TiredHappySickSunny如今，我们来

7、创建一个搜索页面。它主要由两个元素构成：input域和searchresult列表。 Search 如今，我们需求运用JavaScript，把input域绑定到keyup函数上，来填充searchresult列表。$(#search).keyup(function() varres=shuffle(monthes); varlist=; $.each(res,function(index,value) list+=+value+; ); $(#searchresult).html(list); ); 关于这段代码，有几点需求阐明一下。在第一行中，我们对现有的数组进展了“shuffle。Shuf

8、fle函数如下所示：varshuffle=function(o)/v1.0 for(varj,x,i=o.length;i;j=parseInt(Math.random()*i),x=o-i,oi=oj,oj=x); returno; ; 然后，我们创建了一个列表。我们应该用这种方式来创建它，由于列表项是动态地添加到这个列表中的，为了挂载款式和参数，一个框架不会再处置它们了。然后，我们运用anywhere函数，创建一个支持Twitter的页面。首先，我们应该衔接那些库：为了得到相应的Key，他必需在这个页面中注册一下请 HYPERLINK dev.twitter/apps/new%20http

9、:/dev.twitter/apps/new 点击查阅。然后，我们创建这个页面的代码：Simpletwitterexample 如今是最主要的东西了JavaScript代码，当我们翻开这个页面的时候，这些代码将会执行。要追踪这个事件，可以运用一个专门的事件pageshow。关于其他的事件，详细可以参考请 HYPERLINK jquerymobile/demos/1.0a2/ l docs/api/events.html 点击查阅。$(#twitter_page).live(pageshow,function(event,ui) twttr.anywhere(function(T) T.User

10、.find(andrebrov).timeline().first(20).each(function(status) $(div#twi_list).append(+:+status.text+); ); ); ); 关于anywhere函数的运用方法，详细可以参考请 HYPERLINK dev.twitter/anywhere/begin 点击查阅。当我们翻开我们刚刚创建好的这个页面的时候，我们会发现，有一段时间，它不断是空白的，这是由于tweets正在载入。为了让用户知道这是怎样回事，我们将会添加一个spinner。代码如下所示：$(#twitter_page).live(pagesho

11、w,function(event,ui) twttr.anywhere(function(T) $.mobile.pageLoading(); varj=0; T.User.find(andrebrov).timeline().first(20).each(function(status) $(div#twi_list).append(+:+status.text+); j+; if(j=1) $.mobile.pageLoading(true); ); ); ); 在这篇文档中，他可以找到关于spinner，及其适用程序的详细信息请 HYPERLINK jquerymobile/demos/

12、1.0a2/ l docs/api/methods.html 点击查阅。如今，我们来创建地图页面。首先，选择适宜的脚本然后，我们创建这个页面Mapexample “map_canvas元素将会包含这个地图。让我们来定义它的款式：#map_canvas width:100%; height:100%; position:relative; top:0px; 如今，我们添加一段JavaScript代码，这段代码可以确定当前的位置，把这个位置显示在地图的中央，然后给这个位置添加一个标志。此外，在这个标志上，我们还可以某个把某个事件绑定在它的点击操作上。$(#map_page).live(pagesh

13、ow,function(event,ui) navigator.geolocation.getCurrentPosition(function(location) varpoint=newgoogle.maps.LatLng(location.coords.latitude,location.coords.longitude); varmyOptions= zoom:13, center:point, mapTypeId:google.maps.MapTypeId.ROADMAP ; varmap=newgoogle.maps.Map(document.getElementById(map_c

14、anvas),myOptions); varmarker=newgoogle.maps.Marker(position:point,map:map); google.maps.event.addListener(marker,click,function() alert(Currentcoodinatesare:latitude+location.coords.latitude+,longitude+location.coords.longitude); ); ); ); 最后，对于我来说，这个页面中最有趣的元素是：完好的list-divider：翻开一个邮件客户端的链接：me指向号码的链接：Callme关于各种链接，详细可以参考 HYPERLINK j