首页  >  文章  >  web前端  >  jquery Mobile入门—多页面切换示例学习_jquery

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

WBOY
WBOY原创
2016-05-16 17:44:051518浏览

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

2、多页面切换示例代码

复制代码 代码如下:




New Document







JQuery Mobile



这是首页


详细页



3I工作室版权所有




JQuery Mobile



这里是详细页


返回首页



3I工作室版权所有






3、效果图预览


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


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

复制代码 代码如下:

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn