首页 > PHP资讯 > HTML5培训技术 > jQuerymobile自学教程之工具栏

jQuerymobile自学教程之工具栏

HTML5培训技术
本节命令:data-position="fixed"
data-rel="back"
data-derition="reverse"

工具栏在此是指在移动网站和应用中的头部,尾部和内容中的工具条。所以JqueryMobile提供了一套标准的工具和导航栏的工具,可以在绝大多数情况下直接使用

工具栏综述 Toolbar basics

在Jquery Mobile中,有两种标准的工具栏:头部栏和尾部栏
头部栏的作用为网站的标题,通常是移动网站页面的第一个元素,一般包括页面的标题文字和最多两个按钮
尾部栏通常是移动网站页面的最后一个元素,在内容和作用上比头部栏更自由一些,但一般也要包含文字和按钮

在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的,所以JqueryMobile包含导航栏组件,即把无序列表ul转化成水平的按钮栏,使用也非常方便

工具栏定位的设置 Toolbar positioning options

在页面中设置头部栏和尾部栏的位置定位有几种方法。默认情况下,工具栏的定位的属性为"inline".在这种模式下,头部栏和尾部栏通过html自动的文档流放置,保证了他们能在所有的设备上可见,而不需要依靠css和js的定位的支持

固定的定位模式可以使工具条在页面处于固定的位置,而不需要通过js设置。工具条处于他们在页面自然的位置上,就像inline模式一样,但是当他被滚动出屏幕之外时,JqueryMobile会自动通过动画使滚动条重新出现在屏幕的顶部或底部

任何时候,点击屏幕会切换固定定位模式的工具条的显示:当工具条消失时点击屏幕会让他出现,再点击则会让它消失。这样用户就有选择在最大化浏览时要不要隐藏工具栏,要给工具栏设置固定的定位模式,只需给工具栏的容器加“data-position="fixed"的属性即可

全屏的定位模式与固定的定位模式基本相同,但是当他被滚动出屏幕之外时,不会自动重新显示,除非点击屏幕。这对于图片或视频类有提升代入感的应用是非常有用的,当浏览时你想全屏都显示内容,而工具栏可以通过点击屏幕呼出。注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合下

头部栏结构 Header structure

头部栏是处于页面顶部的工具栏,通常包含页面标题文字,文字左边和/或右边可以放置几个可选的按钮用作导航操作
标题文字一般用h1标签,但是从h1-h6都是可以的,这样可以使结构有弹性。比如说,一个页面内包含了多个"page"标记的页面,这样可以给主"page"的标题文字用h1标签,次级"page"的标题文字用h2标签。所有的头部默认下在样式上都是相同的,保持的外观的一致性

 
  Page Title 

默认的头部的特性 Default header features
头部栏的主题样式默认情况下为"a"(黑色)
但是你可以很轻松的设置主题样式
添加按钮 Adding buttons

在标准的头部栏的设置下,标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是a标签,但是可以为其添加任何有效的按钮标记。为了节省空间,工具栏里的按钮都是内联按钮,所以按钮的宽度只容纳icon和里面的文字

创建自定义的后退按钮 Creating custom back buttons

给a标签增加data-rel="back"的属性,任何链接都可以样式化为后退按钮,行为上为后退到上一个历史记录的页面,无视该链接的herf地址。这对于要链接回到一个命名好的页面的情况是很有用的。但是注意请给链接设定一个有意义的herf地址,指向实际要连接的页面,使得C级浏览器也能够使用这个按钮而且要注意如果你只是需要一个后退的页面转场效果,而不是真正的后退到上一个历史记录的页面,应该用data-direction="reverse"的属性,而不是用data-rel="back"属性的按钮

按钮默认的定位 Default button positioning

头部的按钮是头部栏容器的直接子节点,第一个链接定位于头部栏左边,第二个链接放在右边(先左后右)


通过class控制按钮的定位 Controlling button position with classes

按钮的位置可以通过class设置,而不依赖他们在源代码中的顺序。如果你想把唯一一个按钮放在右边,这时就非常有用了。两个控制的类为ui-btn-right和ui-btn-left

在这个例子中,我们要把头部栏唯一一个按钮放于右边,给自己的按钮增加ui-btn-right的class


Page Title




增加表单元素 Adding form elements

表单元素和其他元素也可以添加进工具栏中。这是一个把select添加到尾部栏的实例:

持续的尾部栏 Persistent footers

有些情况下你需要一个尾部栏为全局导航元素,希望页面转场时尾部栏也固定并显示。创造一个持续的尾部栏可以做到这一点
给尾部栏添加data-id属性,并且在所有关联的页面的尾部栏设定同样的data-id的值,就可以使尾部栏在页面转场时也固定并显示,例如给当前页面和目标页面的尾部栏添加id="myfooter" 属性,Jquery Mobile会在页面转场动画的时候保持尾部栏固定请注意:这个效果只有在头部栏和尾部栏设定为固定的定位模式(data-position="fixed")时在才有用,这样他们在页面转场时才不被隐藏 (我不知道怎么写

上一篇:使用jQueryMobile开发移动网站的常用技巧
下一篇:jQueryzTree实例代码

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持29不支持0