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
用Cordova开发HTML5应用程序时,APP加载时画面是白色的或者黑色的,现在的APP基本都有启动画面,添加启动画面只需2步即可。
本例工程路径D:\Soft\PhoneGap\lib\android\example
1.准备一张合适分辨率的png图片(本例:splash.png,分辨率为540*960),将其放入工程路径下的res\drawable目录下。
2.打开工程路径下的src\org\apache\cordova\example\cordovaExample.java文件
在
后添加
其中R.drawable.splash的splash即为刚才放入工程目录的图片名称,这里忽略后缀名。
将
改为
其中5000为延时,即多少毫秒后启动画面消失,可根据自己需要设置。
下面贴出完整代码
cordovaExample.java文件修改前
cordovaExample.java文件修改后
到此为止即可为APP添加启动画面
先平移与先移动不同效果的解释:
public abstract void glTranslatef (float x, float y, float z)
在移动的时候,您并不是相对屏幕中心移动,而是相对与当前所在的屏幕位置。其作用就是将你绘点坐标的原点在当前原点的基础上平移一个(x,y,z)向量。
public abstract void glRotatef (float angle, float x, float y, float z)
glRotatef 同样也是相对位置,所以要控制好相对位置的进栈与出栈时机。
gl.glPushMatrix(); gl.glPopMatrix();