搜索
如何在jQueryMobile上编写应用程序51CTO将会为您讲述如何在jQueryMobile框架上创建一个简单的应用程序，这个应用程序只有几个页面，可以支持Twitter，带有GoogleMaps功能，以及一些基本的元素。【51CTO译文】从jQueryMobile出现之前，介绍过他将支持的各个平台。现在jQueryMobile框架已经发布，虽然他出现的时间并不长，但是它的质量却有了很大的改善。实际上，它的许多子系统都已经重新编写了（为了改善代码的清晰度和性能），跨浏览器兼容性在质量上也有了很大的提升。jQueryMobile以前，我使用过jQTouch和SenchaTouch。它们各有优缺点，但是我更喜欢把注意力放在jQueryMobile开发上。现在，我将会为您讲述如何创建一个简单的应用程序，这个应用程序只有几个页面，可以支持Twitter，带有GoogleMaps功能，以及一些基本的元素。让我们开始吧！首先，我们添加框架和样式。1.linkrel=stylesheethref=http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css/2.scriptsrc=http://code.jquery.com/jquery-1.4.4.min.js/script3.scriptsrc=http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js/script4.现在，让我们来创建页面。这里我们应该注意一下jQueryMobile和jQTouch的相似性——整个应用程序就是一个html页面，在这个html页面中，特殊标记的div就是这个应用程序的“页面”。在它的基础表单中，这样的“应用程序页面”如下所示：1.divdata-role=page2.divdata-role=header.../div3.divdata-role=content.../div4.divdata-role=footer.../div5./div6.“data-role”参数用来设置div的功能：页面，表头，页面的内容或页脚。另外，必须为data-role=page的div设置“id”参数才能对这个应用程序进行导航。另外一个值得一提的参数是“data-theme”。这个参数可以应用到所有的页面元素上，它可以决定使用哪个默认的样式。在这篇文档中，你可以找到一些可用的主题的例子（请点击查阅）。在我们的应用程序的主页上应该有一个菜单，菜单项分别指向使用这些例子的页面。要创建这样一个菜单，我们需要添加一个ul列表。如下所示：1.uldata-role=listviewdata-inset=truedata-theme=a2.liahref=#twitter_pageTwitterexample/a/li3.liahref=#map_pageMapexample/a/li4.liahref=#searchSearchexample/a/li5.liahref=#aboutAbout/a/li6./ul7.ul标签的参数：◆data-role=listview—表示这是一个你想要应用样式的列表。◆data-inset=true—非全屏显示一个列表，如果你的目的刚好相反，可以把它设置成“false”。◆data-theme=a-使用哪个配色方案。jQueryMobile包含很多列表类型：简单的，带图标的，带图像数据的，等等。在这篇文档中，你可以找到一些例子（请点击查阅）。此外，我还想把一个设置按钮添加到工具栏上。这是很容易做到的：1.ahref=#settingsdata-icon=gearclass=ui-btn-rightOptions/a2.就像你看到的一样，这个按钮可以把你导航到个性化的页面，在“gear”样式（data-icon=gear）中，它的外观是一个图标，它位于工具栏的右边。在这个框架中，有一套预置的图标。在这篇文档中，你可以看到一些例子（请点击查阅）。最后，主页如下所示：1.divdata-role=pageid=main_pagedata-theme=b2.divdata-role=header3.h1id=twi_accHomepage/h14.ahref=#settingsdata-icon=gearclass=ui-btn-rightOptions/a5./div6.divdata-role=content7.uldata-role=listviewdata-inset=truedata-theme=a8.liahref=#twitter_pageTwitterexample/a/li9.liahref=#map_pageMapexample/a/liliahref=#searchSearchexample/a/li10.liahref=#aboutAbout/a/li11./ul12./div13.divdata-role=footer14./div15./div16.现在，让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中，你可以找到可用的表单元素的完整列表（请点击查阅）。根据指南，你应该把所有元素都放到一个特定的div中：1.divdata-role=fieldcontain2./div3.让我们按照这条建议来行事。现在，我们把下面这些元素放在表单上。input域：1.labelfor=nameMyname:/label2.inputtype=textname=nameid=namevalue=/3.文本域：1.labelfor=textareaAboutmyself:/label2.textareacols=40rows=8name=textareaid=textarea/textarea3.滑块，设置它的最大值，最小值和当前值：1.labelfor=sliderValuethissite:/label2.inputtype=rangename=sliderid=slidervalue=0min=-50max=50/3.选项：1.labelfor=slider2Valuethissite:/label2.selectname=slider2id=slider2data-role=slider3.optionvalue=offLike/option4.optionvalue=onDislike/option5./select6.选择器：1.selectname=select-choice-1id=select-choice-12.optionvalue=standardTired/option3.optionvalue=standardHappy/option4.optionvalue=standardSick/option5.optionvalue=standardSunny/option6./select7.现在，我们来创建一个搜索页面。它主要由两个元素构成：input域和searchresult列表。1.divdata-role=content2.labelfor=searchSearch/label3.inputtype=searchname=passwordid=searchvalue=/4.uldata-role=listviewdata-inset=trueid=searchresult5./ul6./div7.现在，我们需要使用JavaScript，把input域绑定到keyup函数上，来填充searchresult列表。1.$(#search).keyup(function(){2.varres=shuffle(monthes);3.varlist='';4.$.each(res,function(index,value){5.list+='lirole=optiontabindex=0data-theme=aclass=ui-btnui-liui-btn-up-adivclass=ui-btn-innerdivclass=ui-btn-text'+value+'/divspanclass=ui-iconui-icon-arrow-r/span/div/li';6.});7.$(#searchresult).html(list);8.});9.关于这段代码，有几点需要说明一下。在第一行中，我们对现有的数组进行了“shuffle”。Shuffle函数如下所示：1.varshuffle=function(o){//v1.02.for(varj,x,i=o.length;i;j=parseInt(Math.random()*i),x=o[--i],o[i]=o[j],o[j]=x);3.returno;4.};5.然后，我们创建了一个列表。我们应该用这种方式来创建它，因为列表项是动态地添加到这个列表中的，为了挂载样式和参数，一个框架不会再处理它们了。然后，我们使用anywhere函数，创建一个支持Twitter的页面。首先，我们应该连接那些库：1.scriptsrc=http://platform.twitter.com/anywhere.js?id=key_value&v=1type=text/javascript/script2.为了得到相应的Key，你必须在这个页面中注册一下（请点击查阅）。然后，我们创建这个页面的代码：1.divdata-role=pageid=twitter_pagedata-theme=b2.divdata-role=header3.h1Simpletwitterexample/h14./div5.divdata-role=content6.divid=twi_list/div7./div8.divdata-role=footer9./div10./div11.现在是最主要的东西了——JavaScript代码，当我们打开这个页面的时候，这些代码将会执行。要追踪这个事件，可以使用一个专门的事件——pageshow。关于其他的事件，具体可以参考（请点击查阅）。1.$('#twitter_page').live('pageshow',function(event,ui){2.twttr.anywhere(function(T){3.T.User.find('andrebrov').timeline().first(20).each(function(status){4.$('div#twi_list').append('p'+status.user.name+':'+status.text+'/p');5.});6.7.});8.});9.关于anywhere函数的使用方法，具体可以参考（请点击查阅）。当我们打开我们刚刚创建好的这个页面的时候，我们会发现，有一段时间，它一直是空白的，这是因为tweets正在载入。为了让用户知道这是怎么回事，我们将会添加一个spinner。代码如下所示：1.$('#twitter_page').live('pageshow',function(event,ui){2.twttr.anywhere(function(T){3.$.mobile.pageLoading();4.varj=