query mobile转屏的时候header和footer跟着一起转屏了,看着感觉很别扭?怎么让转屏的时候固定住首尾呢?别着急,这篇文章就是告诉大家如何实现jqm固定首尾转屏效果。
话不多说,先看Demo:
其实前阵子就有很多朋友咨询如何实现固定首尾转屏效果,但是最近笔者一直比较忙,没有抽出时间来细细研究。今天流浪的旋律找到我,并给了我一个demo,实现了上述效果,我拿来细细研究一番,把此demo进行了精简,就出现了大家现在看到的这个demo,所以在此对流浪的旋律表示深深的谢意。
原理简介:
在官网上对Footer有如下描述:
Footer
Container with data-role="footer"
data-id string (unique id, useful in persistent footers)
data-position fixed
data-theme swatch letter (a-z)
官网链接:http://jquerymobile.com/demos/1.2.0/docs/api/data-attributes.html
里面提到了一个data-id属性,后面的描述说这个属性是为了固定footer?看到这是否有些线索了呢?
在看下面官网的描述:
Fixed & Persistent footers
In situations where the footer is a global navigation element, you may want it to appear fixed so it doesn't scroll out of view. It's also possible to make a fixed toolbar persistent so it appears to not move between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.
To make a footer persistent between transitions, add the data-id attribute to the footer of all relevant pages and use the same id value for each. For example, by adding data-id="myfooter" to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to data-position="fixed" so they are in view during the transition.
官网链接:http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-footers.html
看到这里我想大家应该明白了,实现footer的固定,只需要在footer中添加data-position="fixed" 和 data-id="myfooter"属性就可以了,而对于header也就不言而喻了。
注意:
data-id这里有一点需要注意,就是data-id的值需要保持一样。什么意思呢?拿固定footer转屏举个例子:
从A页面转屏到B页面,A页面的footer设置的data-id="footer1"那B页面的footer也需要设置为data-id="footer1",否则会失效。
以上
Warren
原创文章,转载请注明出处:http://www.wglong.com/main/artical!details?id=23
相关推荐
jQM:jQM文档的免费社区应用程序的源代码
JQM,是一个队列管理器。 它有三个目标: 通过使用配置丰富的队列来优化和简化作业的执行,无论它们是什么 使工作管理变得简单 易于包含或嵌入到大多数环境中。 结果是一个占用空间小、易于使用的网格执行系统,它...
Booking_Movies jQueryMobile关于预订电影Sour Leangchhean设计
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能
jqm中文时间控件,在手机web开发上应该有所帮助
一个jqm的实例,一个前端的运用,有关播放器的
JQM1.4.5-DEMOS JQM 移动演示 1.4.5
样品101 示例 jqm 模板
http://blog.csdn.net/chelen_jak/article/details/19397569 源码
《jQuery Mobile实战》源码
jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全下载后评论反积分! jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整...
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
jQM邮件 注意此存储库已停用。 它将继续可供参考。 使用 jQuery Mobile 组件尝试移动优先的响应式应用程序布局。...通过使用位置在更宽的视口上滚动独立列:固定(使用本机浏览器滚动) 渐进增强驱动
jqm-transitions jquery-mobile 使用速度和 jquery-ui 进行转换
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf
drupal-app-jqm-phonegap drupal-app-ajax-jqm-phonegap
jqm-内联-多选一个插件,可让您使用复选框组在 jquery mobile 中表示多选。 演示: : 为什么? 我有一个存在于弹出窗口中的 jQM 表单,我需要在这里使用多选。 多选需要使用 jQM 样式,但这是不可能的,因为 jQM 将...
很简单的例子,适合不知道android怎么用html做界面和JQM写法的初学者,里面有apk文件可以安装看效果,若有不足,请指教!
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf