核心提示：jQueryMobile初识之一页面基础。什么是jQuery Mobile?jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。jQuery Mobile 构建于 jQuery 以...
jQueryMobile初识之一——页面基础。
什么是jQuery Mobile?
jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上。jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。
正式开始接触jQuery Mobile
1.jQuery Mobile页面
1.1jQuery Mobile基础页面
例1-1-1
<body> <p data-role="page"><!--data-role="page"是在浏览器中显示的页面。--> <p data-role="header"> <h1>data-role="header"是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)</h1> </p> <p data-role="main" class="ui-content"> <p>data-role="main"定义了页面的内容，比如文本， 图片，表单，按钮等</p> </p> <p data-role="footer"> <h1>data-role="footer"用于创建页面底部工具条</h1> </p> </p> </body>
1.2在页面中添加一个页面
例1-2-1
<body>
<!--这是第一个页面pageone-->
<p data-role="page" id="pageone"><!--id标志这个页面是pageone-->
<p data-role="header">
<h1>这是页面的顶部工具条</h1>
</p>
<p data-role="main" class="ui-content">
<p>点击下面一行字跳转到第二个页面。</p>
<a href="#pagetwo">跳转到pagetwo</a>
</p>
<p data-role="footer">
<h1>这是页面的底部工具条</h1>
</p>
</p>
<!--这是第二个页面pagetwo-->
<p data-role="page" id="pagetwo"><!--id标志这个页面是pagetwo-->
<p data-role="header">
<h1>这是页面的顶部工具条</h1>
</p>
<p data-role="main" class="ui-content">
<p>点击下面的一行字跳转到第一个页面。</p>
<a href="#pageone">跳转到页面pageone</a>
</p>
<p data-role="footer">
<h1>这是页面的底部工具条</h1>
</p>
</p>
</body>
当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。
访问外部文件可以解决这个问题。
1.3页面中嵌一个对话框
例1-3-1
<body>
<!--这是第一个页面pageone-->
<p data-role="page" id="pageone">
<p data-role="header">
<h1>这是页面的顶部工具条</h1>
</p>
<p data-role="main" class="ui-content">
<p>这是页面的内容</p>
<a href="#pagetwo">点击这个文字弹出对话框pagetwo</a>
</p>
<p data-role="footer">
<h1>这是页面的底部工具条</h1>
</p>
</p>
<!--这是对话框的页面pagetwo-->
<p data-role="page" data-dialog="true" id="pagetwo">
<p data-role="header">
<h1>这是对话框的顶部工具栏</h1>
</p>
<p data-role="main" class="ui-content">
<p>这是对话框的内容</p>
<a href="#pageone">点击跳转到页面pageone</a>
</p>
<p data-role="footer">
<h1>这是对话框的底部工具栏</h1>
</p>
</p>
</body>
对话框是用来信息显示或者表单信息的输入。
在链接中添加data-rel=”dialog”让用户点击链接时弹出对话框。
1.4页面切换效果
例1-4-1
<p data-role="main" class="ui-content">
<p>点击下面的文字跳转</p>
<a href="#pagetwo" data-transition="slide">淡入第二个页面pagetwo</a>
</p>
使用data-transition属性可以进行设置页面切换的效果
| 效果 | 描述 |
|---|---|
| fade | 默认。淡入到下一页 |
| flip | 从后向前翻转到下一页 |
| flow | 抛出当前页，进入下一页 |
| pop | 像弹出窗口那样转到下一页 |
| slide | 从右向左滑动到下一页 |
| slidefade | 从右向左滑动并淡入到下一页 |
| slideup | 从下到上滑动到下一页 |
| slidedown | 从上到下滑动到下一页 |
| turn | 转向下一页 |
| none | 无过渡效果 |
