JQM: 固定首尾转屏效果

query mobile转屏的时候header和footer跟着一起转屏了，看着感觉很别扭？怎么让转屏的时候固定住首尾呢？别着急，这篇文章就是告诉大家如何实现jqm固定首尾转屏效果。

话不多说，先看Demo:

jqm固定首尾转屏效果Demo »

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