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

如何在jQuery Mobile上编写应用程序51CTO将会为您讲述如何在jQuery Mobile框架上创建一个简单的应用程序，这个应用程序只有几个页面，可以支持Twitter，带有Google Maps功能，以及一些基本的元素。【51CTO译文】从/news-219166.htmjQuery Mobile出现之前，介绍过他将支持的各个平台。现在jQuery Mobile框架已经发布，虽然他出现的时间并不长，但是它的质量却有了很大的改善。实际上，它的许多子系统都已经重新编写了（为了改善代码的清晰度和性能），跨浏览器兼容性在质量上也有了很大的提升。jQuery Mobile以前，我使用过jQTouch和Sencha Touch。它们各有优缺点，但是我更喜欢把注意力放在jQuery Mobile开发上。现在，我将会为您讲述如何创建一个简单的应用程序，这个应用程序只有几个页面，可以支持Twitter，带有Google Maps功能，以及一些基本的元素。让我们开始吧！首先，我们添加框架和样式。link?rel=stylesheet?href=/mobile/1.0a2/jquery.mobile-1.0a2.min.css?/?script?src=/jquery-1.4.4.min.js/script?script?src=/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”。这个参数可以应用到所有的页面元素上，它可以决定使用哪个默认的样式。在这篇文档中，你可以找到一些可用的主题的例子（请/demos/1.0a2/点击查阅）。在我们的应用程序的主页上应该有一个菜单，菜单项分别指向使用这些例子的页面。要创建这样一个菜单，我们需要添加一个ul列表。如下所示：ul?data-role=listview?data-inset=true?data-theme=a??lia?href=#twitter_pageTwitter?example/a/li??lia?href=#map_pageMap?example/a/li??lia?href=#searchSearch?example/a/li??lia?href=#aboutAbout/a/li?/ul??ul标签的参数：◆data-role=listview— 表示这是一个你想要应用样式的列表。◆data-inset=true — 非全屏显示一个列表，如果你的目的刚好相反，可以把它设置成“false”。◆data-theme=a- 使用哪个配色方案。jQuery Mobile包含很多列表类型：简单的，带图标的，带图像数据的，等等。在这篇文档中，你可以找到一些例子（请/demos/1.0a2/点击查阅）。此外，我还想把一个设置按钮添加到工具栏上。这是很容易做到的：a?href=#settings?data-icon=gear?class=ui-btn-rightOptions/a??就像你看到的一样，这个按钮可以把你导航到个性化的页面，在“gear”样式（data-icon=gear）中，它的外观是一个图标，它位于工具栏的右边。在这个框架中，有一套预置的图标。在这篇文档中，你可以看到一些例子（请/demos/1.0a2/点击查阅）。最后，主页如下所示：div?data-role=page?id=main_page?data-theme=b??div?data-role=header???h1?id=twi_accHome?page/h1??a?href=#settings?data-icon=gear?class=ui-btn-rightOptions/a??/div??div?data-role=content???ul?data-role=listview?data-inset=true?data-theme=a??lia?href=#twitter_pageTw