jquery Mobile入门―多页面切换示例学习

1、在JQuery Mobile中,多个页面的切换是通过元素、并将属性设置为#+对应的id号的方式进行的。

2、多页面切换示例代码

复制代码 代码如下:




New Document







JQuery Mobile



3I工作室版权所有




JQuery Mobile



这里是详细页


返回首页



3I工作室版权所有






3、效果图预览

jquery Mobile入门―多页面切换示例学习_第1张图片

点击详细页将切换到另一页:

jquery Mobile入门―多页面切换示例学习_第2张图片

4、除了内链接外,还有外链接,实现方法与内链接相同,只是在中增加了另外一个rel属性,并将该属性值设为external表示外链,如:

复制代码 代码如下:

5、动画效果切换页面,只需在中添加data-transition属性,如:
复制代码 代码如下:

详细页 //以弹出的效果打开页面

slide:从右到左滑动的动画效果
pop:以弹出的效果打开页面
slideup:向上滑动的动画效果
slidedown:向下滑动的动画效果
fade:渐变褪色的效果
flip:飞入的效果

你可能感兴趣的:(jquery Mobile入门―多页面切换示例学习)