easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

标签: easy html5 jquery | 发表时间:2012-05-07 15:58 | 作者:J默
出处:http://www.cnblogs.com/

jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile;那么jquery mobile到底包括些什么呢

简介

工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条;Jquery Mobile提供了一套标准的工具和导航栏的工具,可以在绝大多数情况下直接使用;头部一般做网站或应用的标题,功能导航等,一般都是些文字或者按钮;尾部是一个页面的最下端,内容可以根据具体应用需要来排版,也可以放功能导航、各种链接等;内容中使用一般是作为功能的展示,显示内容同时附带着功能;jquery mobile还提供了这些工具栏的一些特性即工具栏定位;通过设置工具栏定位,可以使工具栏一直处于头部或者底部,当滚动时,如果工具栏被滚动到屏幕之外,jquery mobile会自动动画过度将工具条重新显示到头部或者底部;而且任何时候,当点击定位了的工具栏时,点击屏幕会让工具栏消失,再点击时会重新显示;当然还支持全屏的定位模式,当工具条被滚动到屏幕之外时,不会立即显示滚动条,而是当点击屏幕时,工具条会自动显示在固定的位置上。

Header

1. 页面Header是一个data-role为header的div,当然我们可以在这个div里定义其他任何内容,比如常用的后退按钮等

<div data-role="header" data-theme="c">            <h1>Page Header</h1></div><!-- /header -->

2. 一般在header里添加的button不要太多,添加在header里的按钮带有自动定位功能;

比如当添加一个按钮时:

 <div data-role="header" data-theme="c"  data-position="fixed">                       <h1>Page Header</h1>           <!-- <a href="../index.htm" data-icon="back">back</a>-->            <a href="../index.htm" data-icon="check">Save</a>           <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>            <a href="../index.htm" data-icon="check">Save1</a>-->        </div><!-- /header -->

image

添加两个按钮时:

  <div data-role="header" data-theme="c"  data-position="fixed">                       <h1>Page Header</h1>            <a href="../index.htm" data-icon="back">back</a>            <a href="../index.htm" data-icon="check">Save</a>           <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>            <a href="../index.htm" data-icon="check">Save1</a>-->        </div><!-- /header -->

image

更多按钮时:

  <div data-role="header" data-theme="c"  data-position="fixed">                       <h1>Page Header</h1>            <a href="../index.htm" data-icon="back">back</a>            <a href="../index.htm" data-icon="check">Save</a>            <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>            <a href="../index.htm" data-icon="check">Save1</a>        </div><!-- /header -->

image

自动定位功能实际是当header内容之有一个按钮时,会自动给这个按钮添加ui-btn-left样式,当有两个时会给前面一个添加ui-btn-left样式,给第二个自动添加ui-btn-right样式;更多时,第三个到第n个应用ui-btn样式;

当然我们可以自己设置按钮的位置:

 <div data-role="header" data-theme="c"  data-position="fixed">                       <h1>Page Header</h1>          <!--  <a href="../index.htm" data-icon="back">back</a>-->            <a href="../index.htm" class="ui-btn-right" data-icon="check">Save</a>          <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>            <a href="../index.htm" data-icon="check">Save1</a>-->        </div><!-- /header -->

image

当然毕竟header只是一个div,当然我们可以接着在这个div里放任何内容,只要你愿意;

3. 固定header的位置;

当我们在做app时,页面显示更多内容,当然会首选滚动条,但是大家都会知道仅在中部内容上添加滚动条;那么我们的web站点或应用呢;我们也希望在滚动内容时,头和脚固定位置不动;这个jquery mobile通过header或者footer的data-position来设置的;默认的data-position是inline,即你不设置data-position属性,或者设置data-posiiton=”inline”时,页面头和脚会跟随者页面的滚动条滚动;当设置data-posiiton为fixed时,头和脚就会悬浮起来,当内容滚动时,头和脚也会跟着滚动,但是位置一直在最上方和最下方;

image image

这个很简单只需要给header和footer添加data-position="fixed"就ok了

 <div id="mainPage"  data-role="page" data-add-back-btn="true">        <div data-role="header" data-theme="c"  data-position="fixed">                       <h1>Page Header</h1>            <a href="../index.htm" data-icon="back">back</a>            <a href="../index.htm" class="ui-btn-right" data-icon="check">Save</a>          <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>            <a href="../index.htm" data-icon="check">Save1</a>-->        </div><!-- /header -->        <div data-role="content">                <h3>About us</h3>              In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.            To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.            Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.        </div><!-- /content -->        <div data-role="footer" data-position="fixed">                       <h4>Page Fotter</h4>                   </div><!-- /footer -->    </div><!-- /page -->

Footer

1. footer和header一样,也是一个带有data-role=footer的div容器;拥有和header一样的data-position属性;这里就不在多讲了

2. 区别的是,footer不会有header那样的里面的按钮会有自动定位功能;footer里的内容会按照具体的css样式来显示内容

3. 当然我们可以再footer里添加各种自定义的功能(因为它只是一个div么 :) );

4. 有些情况下我们也会需要一个尾部栏为全局导航元素,希望页面切换时尾部栏也固定并显示,创造一个持续的尾部栏可以做到这一点;给尾部栏添加data-id属性,并且在所有关联的页面的尾部栏设定同样的data-id的值,就可以使尾部栏在页面切换时也固定并显示;

实例代码

本文链接

相关 [easy html5 jquery] 推荐:

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

- - 博客园_首页
jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile;那么jquery mobile到底包括些什么呢. 页面Header是一个data-role为header的div,当然我们可以在这个div里定义其他任何内容,比如常用的后退按钮等;. 一般在header里添加的button不要太多,添加在header里的按钮带有自动定位功能;.

渐进使用HTML5语言识别, so easy!

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2408. HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的. 而稍稍多敲几个字母,其就变成了支持HTML5语音API的语音识别文本框了. 我不喜欢嚼人家的烂根子,但是,就算闹得再轰轰烈烈,那些种田的农民伯伯也不知道“半13 连体裤”为何物.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

eclipse插件-easy explore

- - 博客园_首页
最近找到一个Eclipse的插件,名字是Easy Explore,是 Easy Structs 其 中的一个部分. 主要的功能就是在Eclipse里面视图的部分如果看到自己的工程,或者Package,包什么的,在安装完该插件以后点击鼠标右键,选 择"Easy Explore"就可以快速的打开该文件的windows存放文件夹,对于快速的导出源文件是一个很有用的插件.

【外刊IT评论网】HTML5 jQuery 绘图插件

- - 外刊IT评论网
Websanova Paint是一个利用HTML5画布(canvas)技术的jQuery插件. 它能够让你自由的在画板区域使用各种颜色画出任意的形状,还能够涂改. 它能让你设定所画形状的边框,然后用颜色填充. 它的一个最有趣的功能是能让你把画好的作品保存成图片,日后你还能载入这个图片进行二次修改,但有个限制,图片只支持PNG格式的.

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能. 【e800编译】在本教程中,我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能.

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格,同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库,将如下代码添加到标签之前:.

zSlide-基于CSS3/HTML5演示文档jQuery插件

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2136. jquery.zSlide.js是我 zhangxinxu最近折腾的一个jQuery插件,借助于CSS3和HTML5的一些新特性,在浏览器中实现类似于powerpoint幻灯片展示. 无论是在公司内部,还是在一些技术会议上,我们做分享的时候,用的最多的想必是powerpoint.

jQuery html5Validate基于HTML5表单验证插件

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2857. 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军. 目前市面上有不少表单验证插件,看似强大,实在糟糕. 包括:改变了表单元素UI, 为表单元素绑定过多事件等. 包括:需要特定结构的布局,需要特定的类名或者ID.