jquery mobile-初识页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery mobile-初识页面相关的知识，希望对你有一定的参考价值。
这两天工作闲下来，所以给自己充充电，来学习一下jquery mobile，顺便记录在这。
jQuery Mobile是什么？
jQuery Mobile 是一种 web 框架，用于创建移动 web 应用程序创建移动。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。（台式机上面兼容性不好，由于有限的 CSS3 支持）
jQuery Mobile 使用 html5 和 CSS3 通过尽可能少的脚本对页面进行布局。
使用jquery mobile： 下载地址：http://jquerymobile.com/download/
<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>
tip：<script> 标签中为什么没有 type="text/javascript" 属性？在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
first demo（结构）：
<body> <divdata-role="page"> <divdata-role="header"> <h1>欢迎访问我的主页</h1> </div> <divdata-role="content"> <p>我是一名移动开发者！</p> </div> <divdata-role="footer"> <h1>页脚文本</h1> </div> </div> </body>
解释：
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
tip：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
添加页面：
可以在单一 HTML 文件中创建多个页面。通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
<div data-role="page"id="pageone"> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div> </div> <div data-role="page"id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
将页面用作对话框：
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog">转到页面二</a> ---》页面二以对话框形式弹出
</div>
</div>
页面过渡效果（如何从一页过渡到下一页的效果）： data-transition
tip：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换，Internet Explorer 10 支持 3D 转换（更早的版本不支持）Opera 仍然不支持 3D 转换
以上所有的效果加上data-direction=“reverse”之后都可以反向，如原来从右到左，可以变成从左到右
以上是关于jquery mobile-初识页面的主要内容，如果未能解决你的问题，请参考以下文章
changePage 后 jQuery Mobile 刷新页面