jQuery Mobile 学习一_左向右滑动到下一页（利用data-direction属性）-CSDN博客

本文链接：https://blog.csdn.net/fhzh520/article/details/49994591

jQuery Mobile 学习

jQuery Mobile 简介

jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。它适用于所有流行的智能手机和平板电脑。它使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

使用jQuery Mobile很简单，只需将jQuery Mobile相关的文件引用到文件中。引用的方式如下：

<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>

如何将从 CDN 引用 jQuery Mobile的相关文件，可以加快用户的下载速度。

使用 jQuery Mobile 入门

data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

data-role="footer" 创建页面底部的工具栏

列如：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>现在我已经成为一名移动开发者！</p>
  </div>

  <div data-role="footer">
  <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

在 jQuery Mobile 中添加页面

在 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>

将页面用作对话框

对话框是用来显示信息或请求输入的视窗类型。

如需在用户点击（轻触）链接时创建一个对话框，请向该链接添加 data-rel="dialog"：

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交

注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：

<a href="#anylink" data-transition="slide">滑动到页面二</a

下面的表格展示了可与 data-transition 属性一同使用的可用过渡

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。

以下为示例代码：

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎访问我的主页一</h1>
  </div>
  <div data-role="content">
    <p>Welcome!</p>
    <a href="#pagetwo" data-transition="fade">转到页面二(淡入淡出)</a><br/>
    <a href="#pagetwo" data-transition="flip">转到页面二(从后向前翻动)</a><br/>
    <a href="#pagetwo" data-transition="flow">转到页面二(抛出当前页面)</a><br/>
    <a href="#pagetwo" data-transition="pop">转到页面二(弹出窗口)</a><br/>
    <a href="#pagetwo" data-transition="slide">转到页面二(从右向左滑动)</a><br/>
    <a href="#pagetwo" data-transition="slidefade">转到页面二(从右向左滑动并淡入)</a><br/>
    <a href="#pagetwo" data-transition="slideup">转到页面二(从下到上滑动)</a><br/>
    <a href="#pagetwo" data-transition="slidedown">转到页面二(从上到下滑动)</a><br/>
    <a href="#pagetwo" data-transition="turn">转到页面二(转向下一页)</a><br/>
    <a href="#pagetwo" data-transition="none">转到页面二(无过渡效果)</a><br/>
  </div>

  <div data-role="footer">
  <h1>页脚文本一</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎访问我的主页二</h1>
  </div>

  <div data-role="content">
    <p>Goodbye!</p>
    <a href="#pageone" data-transition="fade" data-direction="reverse">转到页面一(淡入淡出)</a><br/>
    <a href="#pageone" data-transition="flip" data-direction="reverse">转到页面一(从后向前翻动)</a><br/>
    <a href="#pageone" data-transition="flow" data-direction="reverse">转到页面一(抛出当前页面)</a><br/>
    <a href="#pageone" data-transition="pop" data-direction="reverse">转到页面一(弹出窗口)</a><br/>
    <a href="#pageone" data-transition="slide" data-direction="reverse">转到页面一(从右向左滑动)</a><br/>
    <a href="#pageone" data-transition="slidefade" data-direction="reverse">转到页面一(从右向左滑动并淡入)</a><br/>
    <a href="#pageone" data-transition="slideup" data-direction="reverse">转到页面一(从下到上滑动)</a><br/>
    <a href="#pageone" data-transition="slidedown" data-direction="reverse">转到页面一(从上到下滑动)</a><br/>
    <a href="#pageone" data-transition="turn" data-direction="reverse">转到页面一(转向下一页)</a><br/>
    <a href="#pageone" data-transition="none" data-direction="reverse">转到页面一(无过渡效果)</a><br/>
  </div>

  <div data-role="footer">
  <h1>页脚文本二</h1>
  </div>
</div>