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

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

jQuery Mobile?导航栏 实例 div data-role=header div?data-role=navbar ul lia href=#anylink首页/a/li lia href=#anylink页面二/a/li lia 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=header a href=# data-role=button首页/a h1欢迎来到我的主页/h1 a href=# data-role=button搜索/a /div 1. 头部栏 下面的代码,将添加一个按钮到头部标题文本的左侧: div data-role=header a href=# data-role=button首页/a h1欢迎来到我的主页/h1 /div 1. 头部栏 但是,如果您把按钮链接放置在 h1 元素之后,将无法显示右侧的文本。要添加一个按钮到头部标题的右侧,请指定 class 为 ui-btn-right: 实例(请制作) div data-role=header h1欢迎来到我的主页/h1 a href=# data-role=button?class=ui-btn-right搜索/a /div 头部可以包含一个或两个按钮,而尾部没有限制。 2. 尾部栏 尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性,因此可以包含尽可能多的按钮: 实例 div data-role=footer a href=# data-role=button在 Facebook上关注我/a a href=# data-role=button在Twitter上关注我/a a

文档评论(0)

1亿VIP精品文档

相关文档