欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-10 15:13:18
...
1、在JQuery Mobile中,多个页面的切换是通过元素、并将属性设置为#+对应的id号的方式进行的。

2、多页面切换示例代码

复制代码 代码如下:




New Document







JQuery Mobile



这是首页


详细页



3I工作室版权所有




JQuery Mobile



这里是详细页


返回首页



3I工作室版权所有






3、效果图预览

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

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

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

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

复制代码 代码如下:

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

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

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

相关标签: 页面切换 mobile