jQuery Mobile基础学习（1）

小溪彼岸

于 2016-06-30 18:47:43 发布

阅读量415

点赞数

分类专栏： # jQuery 文章标签： jQueryMobi

本文链接：https://blog.csdn.net/zww1984774346/article/details/51792635

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery Mobile

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

这些是jQuery Mobile所依赖的文件：
可以从网上下载下来也可使用网上的文件资源。

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

利用jQuery Mobile创建一个简单的页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale= 1" >
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>在此处插入标题在此处插入标题在此处插入标题在此处插入标题在此处插入标题</h1>
    </div>
    <div data-role="content">
        <p>在此处插入正文</p>
    </div>
    <div data-role="footer">
        <h1>在此处插入页脚文本</h1>
    </div>
</div>

</body>
</html>

数据类型：

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

效果：
这里写图片描述

在 jQuery Mobile 中添加页面

在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale= 1" >
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>这是标题</h1>
    </div>
    <div data-role="content">
        <p>这是正文内容</p>
        <a href="#pagetwo">转到页面二</a>
    </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">转到页面一</a>
    </div>

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

</body>
</html>

以对话框形式弹出页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale= 1" >
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>这是标题</h1>
    </div>
    <div data-role="content">
        <p>这是正文内容</p>
        <a href="#pagetwo">转到页面二</a>
        <br>
        <a href="#pagethree" data-rel="dialog">以对话框形式弹出页面三</a>
    </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">转到页面一</a>
    </div>

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

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

    <div data-role="content">
        <p>Goodbye!</p>
        <a href="#pageone">转到页面一</a>
    </div>

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

</body>
</html>

jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：

总demo：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>过渡效果</title>
    <meta name="viewport" content="width=device-width,initial-scale= 1" >
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>欢迎来到我的主页</h1>
    </div>

    <div data-role="content">
        <!--demo1:-->
        <p>点击链接来查看滑动效果（从右向左滑动到下一页）</p>
        <a href="#pagetwo" data-transition="slide">滑动到页面二</a>
        <!--demo2:-->
        <p>点击链接来查看淡入淡出效果。<br><b>注释：</b>：fade 是默认效果。</p>
        <a href="#pagetwo" data-transition="fade">转到页面二</a>
        <!--demo3:-->
        <p>点击链接来查看翻转效果。</p>
        <a href="#pagetwo" data-transition="flip">转到页面二</a>
        <!--demo4:-->
        <p>点击链接来查看流效果。</p>
        <a href="#pagetwo" data-transition="flow">转到页面二</a>
        <!--demo5:-->
        <p>点击链接来查看弹窗效果。</p>
        <a href="#pagetwo" data-transition="pop">转到页面二</a>
        <!--demo6:-->
        <p>点击链接来查看滑动淡出效果。</p>
        <a href="#pagetwo" data-transition="slidefade">转到页面二</a>
        <!--demo7:-->
        <p>点击链接来查看向上滑动效果。</p>
        <a href="#pagetwo" data-transition="slideup">转到页面二</a>
        <!--demo8:-->
        <p>点击链接来查看向下滑动效果。</p>
        <a href="#pagetwo" data-transition="slidedown">转到页面二</a>
        <!--demo9:-->
        <p>点击链接来查看打开效果。</p>
        <a href="#pagetwo" data-transition="turn">转到页面二</a>
        <!--demo10:-->
        <p>点击链接来查看无效果。</p>
        <a href="#pagetwo" data-transition="none">转到页面二</a>
    </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">
        <!--demo1返回:-->
        <p>点击链接来查看反向的滑动效果（从左向右滑动到前一页）</p>
        <a href="#pageone" data-transition="slide" data-direction="reverse">滑动到页面一（反向）</a>
        <!--demo2 返回:-->
        <a href="#pageone">返回页面一</a>
        <!--demo3 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo4 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo5 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo6 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo7 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo8 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo9 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
        <!--demo10 返回:-->
        <p>点击链接返回页面一。<b>注释：</b>：fade 是默认效果。</p>
        <a href="#pageone">返回页面一</a>
    </div>

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

小溪彼岸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile基础学习（1）

jQuery MobilejQuery Mobile 是创建移动 web 应用程序的框架。适用于所有流行的智能手机和平板电脑。使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。这些是jQuery Mobile所依赖的文件：可以从网上下载下来也可使用网上的文件资源。<head><link rel="stylesheet" href="http://code.jquery.
复制链接

扫一扫

专栏目录