jQuery Mobile组件:工具栏

移动开发
工具栏(Toolbar)一般用于header,footer和utility bar,他们遍及一个移动页面和程序,所以jQuery Mobile提供了一系列标准的工具栏和导航工具 来涵盖大部分常见情况。

Toolbar 类型

在jQuery Mobile中, 有两种标准类型的工具栏: Headers 和 Footers.

Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素,一般包含有一个页面标题和两个按钮。

Footer bar 通常是最后一个元素,相比于header在内容和功能上面更加自由, 但是一般包含一些文字和按钮。

在header/footer中一个水平的导航栏或者tab页是非常常见的;jQuery Mobile包含了 导航条部件 ,该部件能将一个无序列表(ul)链接变成一个水平分布的按钮栏。 /p>

Toolbar 位置选项

Header 和 footers 可以用不同方式调整他们在页面中的位置。默认情况下,toolbar 会使用"inline" positioning 模式 ,该模式中,header 和footer 会位于自然文档流中(即默认的HTML行为),这样可以确保它们在所有的设备中可见 (不管设备是否支持JavaScript和css)。

"fixed" positioning 模式提供了一个无视人为滚动页面保持固定位置的 toolbar,toolbar会像"inline"模式一样出现在它们在页面中原始的位置,但是你滚动滚动条使toolbar离开视线时, 框架会通过动态重新调整toolbar的位置好让toolbar以动画的效果重新出现在当前浏览器视口的顶部或者底部。

在任何时候,轻按屏幕会切换固定工具栏的可视性:轻按一次显示,再按一次隐藏。 这使用户可以选择隐藏工具栏, 来使得屏幕显示的内容更多。

要为header或footer设置此行为,为toolbar的容器添加 data-position="fixed" 属性。

"fullscreen" position 模式 和固定模式一样, 但是不会在顶部和底部出现,除非你点击页面。 在创建沉浸式应用时(如照片或视频浏览器)非常有用,你可以全屏浏览, 而toolbar会在你需要时轻触屏幕来呗唤出。请记住,在这种模式下,toolbar出现时会覆盖页面内容,因此最好是在特定情况下使用此模式。#p#

头结构

header通常是页面顶部包含页面标题文字和可选按钮以及定位到左侧和/或右导航的工具条。

标题文本通常是一个H1标题元素,但它可以使用任何级别的标题(H1 - H6)的,以体现语义的灵活性。 例如,一个页面包含多个 'page '时,可以使用H1表示的‘首页’的标题,H2元素表示二级‘页面’的标题。 默认情况下所有标题级别是相同的风格,以保持视觉上的一致性。

  1. <div data-role="header"> 
  2. <h1>页面标题</h1> 
  3. </div> 

默认 header 的特性

header工具栏默认被设置为'a'主题调板(黑色),但是你可以方便的 设置主题调板.

Back页面标题

看到 "back" 按钮没?框架会自动在每个页面生成该按钮, 以简化创建通用导航条的过程,要阻止header中自动添加该按钮,你可以自行在左边添加按钮 或者为header容器添加 data-backbtn="false" 属性。

添加按钮

在标准header配置中,文本旁边有很多位置可供添加按钮。每个按钮通常都是一个 a标签,但是任何可用的按钮标签都可以添加。 为了节省空间,在工具栏中按钮被设置为inline styling , 所以按钮的宽度会和它所包含了文本、按钮所匹配。

创建自定义后退按钮

如果你对a标记使用data-rel="back"属性,任何在此a上的点击都会模拟后退按钮, 和浏览器的历史按钮一样,并会忽略a标记本身的href。当链接到一个已有页面,比如“主页”, 或者生成后退按钮时或者一个按钮来关闭一个对话框时,该属性十分有用。当在你的源文件中使用此特性时, 请确保提供一个有意义的href来指向引用页的URL(这样才能使得用户在C级浏览器中也能使用该特性)。 同样的,请记住如果你只是想要一个反向过渡而并不实际回到上一页,你应该使用data-direction="reverse"属性来替代。

默认按钮定位

header插件会寻找header容器的直接子元素,并自动设置第一个链接在左边的位置,第二个链接在右边。 在以下的例子中,“取消”按钮会出现在左边而“保存”会出现在右边。

  1. <div data-role="header" data-position="inline"> 
  2. <a href="index.html" data-icon="delete">取消</a> 
  3. <h1>Edit Contact</h1> 
  4. <a href="index.html" data-icon="check">保存</a> 
  5. </div> 

按钮会自动适应按钮所在工具栏的调板颜色,所以在一个调板为“a”的header bar里一个按钮也会被设置为“a”, 除非你单独设置按钮的 data-theme属性为其他值(例如b)。

  1. <div data-role="header" data-position="inline"> 
  2. <a href="index.html" data-icon="delete">Cancel</a> 
  3. <h1>Edit Contact</h1> 
  4. <a href="index.html" data-icon="check" data-theme="b">Save</a> 
  5. </div> 

用class控制按钮的位置

按钮位置同样可以用class而不是源代码的顺序来控制。当你想按钮只在右边时就非常有用。为a标记添加ui-btn-left 或者ui-btn-right class来指定按钮的位置。

在以下例子中,我们只在右边添加了一个按钮,所以必须要添加 data-backbtn="false" 来防止出现后退按钮,而右边的按钮则需要添加ui-btn-right class 。

  1. <div data-role="header" data-position="inline" data-backbtn="false"> 
  2. <h1>页面标题</h1> 
  3. <a href="index.html" data-icon="gear" class="ui-btn-right">选项</a> 
  4. </div> 

自定义后退按钮的文本

 

如果您想配置后退按钮的文本,您可以使用 data-back-btn-text="previous" 属性, 或者以编程方式设置插件的选项:$.mobile.page.prototype.options.backBtnText = "previous";。如果你采用编程方式,请在mobileinit事件的处理程序中设置该选项。

自定义 header配置

如果你要创建一个自定义的header,将你自己的标记包裹在一个 div容器中(在header容器中), 插件不会应用自动按钮逻辑,所以你可以编写自定义样式来布局你的header内容。#p#

Footer 结构

footer 和 header的基本机构相同,除了它使用data-role="footer"来定义。

  1. <div data-role="footer">  
  2.     <h4>Footer content</h4>  
  3. </div>  

footer工具栏默认会被设置为"a"调板(黑色),但是你可以轻松的更改。

Footer content

在配置方面footer和header也非常相似,主要的区别是footer被设计为更轻便的结构来实现更灵活的配置, 所以框架不会像在header中那样自动排列按钮。

添加按钮

任何连接或者合法的按钮标记都可以添加到footer中并呗自动转变成一个按钮。 为了节省空间,工具栏中的按钮会自动被设置inline styling ,让按钮宽度能适应其内容。

默认情况下,工具栏没有任何空白(padding)位置来填充导航条和其他小部件,要使工具栏包含空白,添加class="ui-bar" 。

  1.   
  2. <div data-role="footer" class="ui-bar"> 
  3.     <a href="index.html" data-role="button" data-icon="delete">Remove</a> 
  4.     <a href="index.html" data-role="button" data-icon="plus">Add</a> 
  5.     <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 
  6.     <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> 
  7. </div> 

以下会创建一行包含按钮的工具栏

要为按钮分组的话请将连接包裹在一个wrapper(通常是div)中并为其添加 data-role="controlgroup" 和 data-type="horizontal" 属性。

  1. <div data-role="controlgroup" data-type="horizontal"> 

 

以下创建了一组按钮集:

Remove Add Up Down

添加表单元素

表单元素和其他内容也可以添加到工具栏里面,以下是一个选择菜单的例子(select元素):

Shipping: Standard: 7 day Standard: 7 day Rush: 3 days Express: next day Overnight

固定footer

在某些情况下 footer会作为全局导航元素存在,你可以需要footer在页面过渡和切换时也出现在固定的位置, 而这一特性jQuery Mobile也提供了支持。

要实现footer的固定,你可以为所有相关页面的footer添加一个 data-id 属性并使用相同的 code>id值。例如,为当前页和目标页添加一个data-id="myfooter" 属性后, 框架会在页面切换动画发生时自动保持footer元素的位置。请注意:这一效果只有在footer/header 设置了data-position="fixed" 时才会起作用。#p#

navbar 示例

jQuery Mobile有一个非常基本的Navbar部件非常有用,它提供多达5个按钮和可选的图标,通常位于header/footer里面。

navbar通常是一个包裹在一个容器里的无序链接列表,容器设置data-role="navbar" 属性。 要设置其中一个链接是激活(被选择)的状态,为链接添加 class="ui-btn-active" 。 在下面这个例子中我们有一个位于footer中包含两个按钮的navbar,其中一个被设置为激活状态:

  1. <div data-role="footer"> 
  2.     <div data-role="navbar"> 
  3.         <ul> 
  4.             <li><a href="a.html" class="ui-btn-active">One</a></li> 
  5.             <li><a href="b.html">Two</a></li> 
  6.         </ul> 
  7.     </div><!-- /navbar --> 
  8. </div><!-- /footer --> 

#p#

固定工具栏会在你卷动后重新出现

这是一个jQuery Mobile框架里“fixed” header/footer的演示。滚动会导致header和footer消失,停止滚动时会再度出现, 任何时候轻触屏幕或者滑动屏幕都会使得工具栏重新出现或者消失。

该行为使用 data-position="fixed"属性来设置。

  1. <div data-role="header" data-position="fixed"> 
  2.     <h1>Fixed toolbars</h1> 
  3. </div> 

#p#

[[37221]]

这个页面演示了“全屏”工具栏模式。 这个工具栏是用来处理在特殊情况下, 你想用内容来填充整个屏幕,并且希望header和footer 工具栏在点击屏幕的时候出现或消失时所使用的模式 -- 通常适用于照片,图像或者视频浏览的情况。

要开启该特性,你需要将data-fullscreen="true" 添加到你的 page(data-role="page"的div)中,并且为header和footer容器(div) 同时添加data-position="fixed" 属性。

请记住,在这种模式下,如同demo展示的那样工具栏会覆盖页面内容,当工具栏可见时不是全部内容都能够看见的。#p#

header 和footer都可以被主题化(默认为a调板),因为在视觉上工具栏通常是页面的主要层级。

主题化 headers和footers

要设置主题依然和其他一样,使用data-theme属性。例如(b调板,蓝色):

  1. <div data-role="header" data-theme="b">  
  2.     <h1>Page Title</h1>  
  3. </div>  

设置工具栏中的button主题

任何工具栏里的button都会自动被设置为和工具栏一样的主题色,要额外设置也请使用data-theme 属性。、 例如我们为header设置的是“C”(亮灰)调板,则button也会变成“c”调板,要设置其他主题,请为button的a标签设置额外的 data-theme属性。

  1. <a href="add-user.php" data-theme="b">Save</a>  

 

责任编辑:佚名 来源: filod
相关推荐

2009-11-13 10:06:22

Visual Stud

2011-07-21 16:10:11

button按钮jQuery Mobi

2011-02-22 17:29:24

konqueror

2012-10-11 11:27:05

火狐开发工具栏

2011-07-26 08:40:31

jQuery Mobi组件内容格式

2009-08-25 15:52:27

C#工具栏

2011-09-19 14:15:17

Vista工具栏

2011-07-19 14:38:06

jQuery Mobi

2012-07-18 13:35:58

微软Office 15

2012-06-19 09:31:53

Windows Pho

2009-12-04 16:35:54

Visual Stud

2011-07-21 15:50:42

jQuery Mobi页面对话框

2022-02-11 14:48:57

Chrome谷歌下载栏

2009-10-30 08:49:30

Windows 7锁定IE工具栏

2011-07-25 09:47:27

2011-07-20 14:03:33

jQuery Mobi实用工具

2021-12-15 11:01:56

Google工具IE

2012-11-15 10:18:51

IBMdw

2011-09-02 10:41:51

2011-07-19 14:51:54

jQuery Mobi特性
点赞
收藏

51CTO技术栈公众号