jQueryMobile的组件——页面(page)
2015-08-27 11:55
621 查看
data-role="page"——代表这个div是一个page,在一个屏幕中只会显示一个page;
data-transition——可以定义页面切换的动画效果;
![](http://img.blog.csdn.net/20150827114146443?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150827114653661?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150827115015001)
![](http://img.blog.csdn.net/20150827115243942)
data-transition——可以定义页面切换的动画效果;
<div data-role="page"> <div data-role="header"> ... </div> <div role="content" > ... </div> <div data-role="footer"> ... </div> </div>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>page实例</title> <script src="jquery-2.1.3.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" type="text/css"> </head> <body> <!--第一页--> <div data-role="page" id="pageOne"> <div data-role="header" data-position="fixed"> <h1>欢迎来到主页</h1> </div> <div role="main" > <a href="#pageTwo" data-transition="slide">跳到第二页面</a> <a href="#pageTwo" data-rel="dialog">打开一个dialog</a> </div> <div data-role="footer" data-position="fixed"> <h1>这是底部</h1> </div> </div> <!--第二页--> <div data-role="page" id="pageTwo"> <div data-role="header" data-position="fixed"> <h1>欢迎来到主页</h1> </div> <div role="main" > <a href="#pageOne" data-transition="flip">跳回第一个页面</a> </div> <div data-role="footer" data-position="fixed"> <h1>这是底部</h1> </div> </div> </body> </html>在iphone6中的效果:
相关文章推荐
- Jquery DIV滚动至浏览器顶部位置固定
- json+jQuery实现的无限级树形菜单效果代码
- JQuery动画插件Velocity.js
- jQuery on()方法示例及jquery on()方法的优点
- 读<jQuery 权威指南>[6]--实用工具函数
- jquery validate 详解
- jQuery UI设置固定日期选择特效代码分享
- 积跬步,聚小流------实例分析jquery开发插件两种方法的区别
- jquery网页加载进度条NProgress.js
- jQuery实现自动与手动切换的滚动新闻特效代码分享
- Jquery 的遍历,祖先、后代、同胞以及其过滤
- jQuery on()方法
- JavaScript和jQuery图片上传预览
- 关于jquery.flexslider-min.js插件
- jQuery Ajax通用js封装
- javascript中html字符串转化为jquery dom对象的方法
- jquery性能优化
- jQuery制作带有微信二维码扫描的页面返回顶部代码
- jQuery入门:CSS,样式和大小
- 利用layer.js和jQuery在form提交页面添加loading层