--/footer-->

--/page-->

上面这段代码中第一个div非常重要，它包含有一个id和一个data-role属性：

data-role="page"id="menu"

data-role定义了这个div是一个“page”，page这个术语稍微有点让人误解，“page”这里其实指的是一个可视面或者在屏幕里未隐藏的HTML代码部分，而不是指的一个单独的页面（或者说单独的HTML文件）。

data-role="page"意味着jQueryMobile会根据div元素在屏幕中构建可视内容。

而id属性允许你通过a标签链接到该page，或者其他page。

上面创建的导航页是我们在浏览器看到的第一个页面，接下来我们再添加三个“page”，他们有不同的id：

Cars，Planes，Trains。

Cars

--/header-->

Wecanaddalistofcars

--/content-->

PageFooter

--/footer-->

--/page-->

--Startofthirdpage-->

Trains

--/header-->

Wecanaddalistoftrains

--/content-->

PageFooter

--/footer-->

--/page-->

--Startoffourthpage-->

Planes

--/header-->

Wecanaddalistofplanes

--/content-->

PageFooter

--/footer-->

--/page-->

现在，在你的Android或者IOS设备里测试一下，当你加载好页面后你会发现这三件事情：

∙导航页出现在屏幕中（你可以上下滚动一下，并没有别的东西出现）

∙当你点击一个链接时，会动画切换到另一个页面。

∙新页面的顶部会自动出现一个“back”按钮（译注：

jQueryMobile目前版本默认已经取消了这一功能）

其实这些div元素预先会加载并缓存到你的浏览器中，因此“页面”间的切换会非常流畅。

在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数，但同时也会导致许多移动设备运行缓慢。

jQueryMobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接时，你可以这样编写你的链接代码：

//www.madinc.co"rel="external">madinc.co

如上所示，仅需要为a标签添加rel="external"属性即可。

然而jQueryMobile对于（同域的）外部链接并不是简单地跳转完事儿，相比于其他移动框架它更进了一步，因为他对（同域的）所有链接都采用Ajax调用方式，从而实现漂亮的转场效果。

基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。

使用组件

链接和页面只是移动网页设计中一个很小的部分，APP程序（比如采用Object-C，C#，java等在Android或者IOS设备上创建的本地应用程序）快速增长的同时产生了丰富的控件和组件（例如菜单栏，列表等控件）使得开发者可以很方便地创建复杂的应用程序，这正是许多移动网页开发者第二个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。

针对这一问题，jQueryMobile当前正在创建一组非常有用的组件。

以下是在alpha版本中已经发布的组件：

∙Pages（页面）

∙Dialogboxes（对话框）

∙Toolbars（工具栏）

∙Buttons（按钮）

∙Contentformatting（内容格式化）

∙Formelements（表单）

∙Listviews（列表）

只要你懂的一点点的HTML，你会发现添加这些组件并不困难，接下来我们看几个例子。

为页面添加header和footer

上面的模版已经为你展示了如何轻松地创建工具栏（header，footer）。

我们知道，在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活儿。

而现在，jQueryMobile让你能够非常容易地创建一个带有一个居中标题和两个按钮并且自适应任何屏幕尺寸的header：

Cancel

EditContact

Save

代码中a标签的顺序决定了按钮显示的位置。

以上代码在几乎所有的设备中都能取得一致的显示效果。

header和footer同样可以被自定义为你想要的样式，比如改造一个导航条：

你可以添加一些按钮在footer里面，从而导航到某一页面的不同部分：

html;gutter:

false;">

• One
• Two

--/navbar-->

从这些代码你可以发现jQueryMobile不过是一些简单的HTML代码，导航条依然是div，而诸如ui-btn-active这个class可以使得你的按钮显示为被选择状态。

当你点击一个按钮并导航到该页面的另一个部分时，jQueryMobile会自动加上一个back按钮，以下的代码结构可以清晰地展现这一过程：

Navigation

--/header-->

Navigationpage

--/content-->

• One
• Two

--/navbar-->

--/footer-->

--/page-->

NavScreen1

--/header-->

ScreenforNavigationOne

--/content-->

AdditionalFooterinformation

--/footer-->

--/page-->

NavScreen2

--/header-->

ScreenforNavigationTwo

--/content-->

AdditionalFooterinformation

--/footer-->

--/page-->

创建位置固定的header和footer

工具条固定在屏幕上方或者下方是一个很常见的界面设计，你可以为footer或者header添加data-position="fixed"来实现这一点。

以下代码会强制footer/header固定在下方/上方：

Navigation

--/header-->

0;">

RoyalFamily

PrimeMiniseters

--/content-->

• Royals
• Leaders

--/navbar-->

--/footer-->

--/page-->

RoyalFamily

--/header-->

MembersandrelativesoftheBritishRoyalFamilyhistoricallyrepresentedthemonarchinvariousplacesthroughouttheBritishEmpire,sometimesforextendedperiodsasviceroys,orforspecificceremoniesorevents.Today,theyoftenperformceremonialandsocialdutiesthroughouttheUnitedKingdomandabroadonbehalfoftheUK,but,asidefromthemonarch,havenoconstitutionalroleintheaffairsofgovernment.ThisisthesamefortheotherrealmsoftheCommonwealththoughthefamilythereactsonbehalfof,isfundedby,andrepresentsthesovereignofthatparticularstate,andnottheUnitedKingdom.

--/content-->

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

jQuery Mobile 入门教程

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。