使用页眉、工具栏和标签栏来导航精要.ppt

jQuery Mobile?导航栏  实例 div data-role=headerdiv?data-role=navbarullia href=#anylink首页/a/lilia href=#anylink页面二/a/lilia href=#anylink搜索/a/li/ul/div/div jQuery Mobile?导航栏  请参照下边效果图完成页面制作： jQuery Mobile?导航栏  默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行。 1.激活按钮  当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。 如果想在不点击链接时获得这种外观，请使用 class=“ui-btn-active”。 jQuery Mobile?导航栏  如： lia href=#anylink?class=ui-btn-active首页/a/li 效果图如下 ： jQuery Mobile?导航栏  对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 “ui-state-persist” 和 “ui-btn-active” 到链接的 class。 实例如： lia href=#anylink?class=ui-btn-active ui-state-persist首页/a/li jQuery Mobile?导航栏  效果图如下 ： 效果图1 效果图2 2.内容中的导航栏  内容中的导航栏如何在 data-role=content 内添加导航栏。 效果图如下 ： 3.尾部中的导航栏  如何在尾部内添加导航栏。 效果图如下 ： 4.导航栏中的定位图标  如何在尾部内的导航栏中定位图标。 效果图如下 ： 5. 多按钮导航的演示案例  超过 5 个按钮导航栏中 10 个按钮的演示。 效果图如下 ： 本讲总结 页眉栏相关属性？ 页脚栏相关属性？ 工具栏相关属性？ 标签栏相关属性？ * * * * 使用页眉、工具栏和标签栏来导航 （第七讲 ) 知识回顾 jQuery Mobile 的特点？ Jquery mobile 页面模板相关属性？ Ajax导航？ 媒体查询响应式布局？ 教学内容 页眉栏 回退按钮 页脚栏 工具栏 标签栏 重点、难点 重点 页眉栏 页脚栏 工具栏 标签栏 难点 工具栏 标签栏 jQuery Mobile 工具栏  工具栏元素通常位于头部和尾部内 - 让导航易于访问。如图所示： 1.头部栏 2.尾部栏 3.定位头部栏和尾部栏 1. 头部栏  头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。 您可以添加按钮到头部的左侧或右侧。 下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧： 实例（请制作） div data-role=headera href=# data-role=button首页/ah1欢迎来到我的主页/h1a href=# data-role=button搜索/a/div 1. 头部栏  下面的代码，将添加一个按钮到头部标题文本的左侧： div data-role=headera href=# data-role=button首页/ah1欢迎来到我的主页/h1/div 1. 头部栏  但是，如果您把按钮链接放置在 h1 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 ui-btn-right： 实例（请制作） div data-role=headerh1欢迎来到我的主页/h1a href=# data-role=button?class=ui-btn-right搜索/a/div 头部可以包含一个或两个按钮，而尾部没有限制。 2. 尾部栏  尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮： 实例 div data-role=footera href=# data-role=button在 Facebook上关注我/aa href=# data-role=button在Twitter上关注我/aa