JQuery Mobile 随笔

猴子是monkey

于 2018-05-02 22:08:30 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/m0_37732679/article/details/80172885

版权

第1章初识JQuery Mobile
- 1.1 安装JQuery mobile 环境
- 1.2 开发第一个JQuery Mobile 页面
第2章 HTML5基础
第3章设计页面和对话框
- 3.1 设计页面
- 3.2 设计对话框
  - 3.2.1 定义对话框
  - 3.2.2 定义关闭对话框
第4章页面高级设计
第5章设计弹出页面
- 5.1 定义弹出页面
- 5.2 使用弹出页面
  - 5.2.1 菜单和嵌套菜单

第1章初识JQuery Mobile

1.1 安装JQuery mobile 环境

<meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

1.2 开发第一个JQuery Mobile 页面

新建一个HTML文件，在<head>中添加3个JQuery Mobile框架文件
在标签<body>中通过<div>定义移动页面的结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>页标题</h1>
    </div>
    <div data-role="content">
        <p><a href="#" data-rel="dialog">弹出菜单</a></p>
    </div>
    <div data-role="footer">
        <h3>页脚</h3>
    </div>
</div>
</div>
</body>
</html>

效果图如图所示：

第2章 HTML5基础

本章单独编写，这里不做介绍

第3章设计页面和对话框

3.1 设计页面

3.1.1 定义单页

根据第1章的建立JQuery Mobile 页面的方法，新建HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        页标题
    </div>
    <div data-role="content">
        页面内容
    </div>
    <div data-role="footer">
        页脚
    </div>
</div>
</body>
</html>

效果图如下：

这里说明下几个重要的参数说明：

参数	说明
page	页面容器，其内部的mobile元素将继承这个容器上所设置的属性
header	页面标题容器，可以包含文字、按钮元素
footer	页面页脚容器，可以包含文字、按钮元素
content	页面内容容器，主容器，包含页面的大部分内容
controlgroup	将几个元素设置成一组，一般是几个同类型的元素
fieldcontain	区域包裹容器，用增加编剧和分割线的方法将容器内的元素和容器外的元素分割
navbar	功能导航容器，简单说就是工具条
listview	列表展示容器
list-divider	列表展示容器的表头，用来展示一组列表的吧标题，内部不可包含链接
button	按钮
none	阻止框架进行渲染，一般用于form元素

3.1.2 定义多页

新建HTML文件，导入JQuery Mobile框架

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

配置页面视图，确保在不同设备中都是满屏显示
<meta name="viewport" content="width=device-width,initial-scale=1"/>

完成剩余代码

<body>
<div data-role="page" id="home">
    <div data-role="header">
        页标题
    </div>
    <div data-role="content">
        <p><a href="#new1"> JQuery Mobile 1.4.0发布</a></p>
    </div>
    <div data-role="footer">
        <h4>@2015 jm.cn studio</h4>
    </div>
</div>
<div data-role="page" id="new1">
    <div data-role="header">
        页标题
    </div>
    <div data-role="content">
        <h1>这是另一个页面</h1>
    </div>
    <div data-role="footer">
        页脚
    </div>
</div>
</body>

效果图：

点击链接之后跳转到下一个页面

3.1.3 定义外部页

将标注出来的地方改为外部页面，如page2.html，即可实现点击跳转到page2界面上

3.2 设计对话框

3.2.1 定义对话框

新建一个HTML文件，导入框架文件，在跳转链接的添加data-rel="dialog"即可实现弹出对话框页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>弹出菜单练习</h1>
    </div>
    <div data-role="content">
        <p><a href="#page2" data-rel="dialog">弹出菜单</a></p>
    </div>
    <div data-role="footer">
        <h3>@2018 Fisher</h3>
    </div>
</div>
<div id="page2">
    <div data-role="header">
        <h1>页标题</h1>
    </div>
    <div data-role="content">
        <p>这是一个弹出式菜单</p>
    </div>
    <div data-role="footer">
        <p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
    </div>
</div>
</body>
</html>

效果图：

下一步：点击弹出菜单

3.2.2 定义关闭对话框

上图中的关闭按钮在<footer>中添加的，所以关闭按钮在页脚位置，如果将按钮添加在<content>中，效果如下：

具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>弹出菜单练习</h1>
    </div>
    <div data-role="content">
        <p><a href="#page2" data-rel="dialog">弹出菜单</a></p>
    </div>
    <div data-role="footer">
        <h3>@2018 Fisher</h3>
    </div>
</div>
<div id="page2">
    <div data-role="header">
        <h1>页标题</h1>
    </div>
    <div data-role="content">
        <p>这是一个弹出式菜单</p>
        <p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
    </div>
    <div data-role="footer">
        <!--<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>-->
    </div>
</div>
</body>
</html>

第4章页面高级设计

4.1 页面初始化

在JQuery Mobile中，这3种初始化时间是有区别的，具体说明如下。

mobileinit：启动JQuery Mobile时触发该事件。
$(docunment).ready()：HTML页面DOM对象加载完成时触发此事件。
pageinit：初始化完成某个视图页面是，触发此事件。

初始化事件的触发顺序如下。
第1步，首先触发mobileinit。
第2步，触发$(docunment).ready()。
第3步，每当第一次打开某个视图页面时，触发pageinit事件。例如，打开第一个视图页面时，会触发其pageinit事件；当跳转到第二个视图页面时，会触发第二个页面的pageinit事件。

mobileinit、$(document).ready()和pageinit只能触发一次

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(document).ready(function () {
            alert("触发ready事件");
            /*$(document).live("mobileinit", function () {
             alert("触发mobileinit事件");
             });//live方法无效,弃用live改为on*/
            $(document).on("mobileinit", function () {
                alert("触发mobileinit事件");
                $(document).delegate("#page1", "pageinit", function () {
                    alert("触发页面1的pageinit事件");
                });
                $(document).delegate("#page1", "pageshow", function () {
                    alert("触发页面1的pageshow事件");
                });
            });
        });
    </script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <!--<a href="#" class="ui-btn-icon-home ui-btn-icon-left">首页</a>-->
        <h1>测试Html5Apps首页</h1>
        <!--<a href="#" data-role="button" class="ui-btn-icon-search ui-btn-icon-right">新建</a>-->
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#" onclick="$(document).trigger('mobileinit')">触发mobileinit</a></li>
            <li><a href="#page2">进入第二页</a></li>
        </ul>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div data-role="content">
        <a href="#page1" data-role="button">返回第一页</a>
    </div>
</div>
</body>
</html>

效果图如下：

页面初始化弹窗

点击触发mobileinit

弹窗提示

点击跳转到下一页之后返回到第一个页面时提示

4.2 预加载和缓存

4.2.1 页面预加载

实现页面预加载的方法有两种：

在需要链接页面的标签中添加data-prefetch属性，设置属性值为true，或不设置属性值。设置该属性值之后，JQuery Mobile将在加载完成当前页面之后，自动加载该链接元素所指的目标页面，即href属性的值
调用JavaScript代码中的全局方法$.mobile.loadPage()来预加载指定的目标HTML页面，其最终的效果与设置元素的data-prefetch属性一样

4.2.2 页面缓存

实现将页面内容写入文档缓存中有两种方法：

在需要被缓存的视图页标签中添加data-dom-cache属性，设置该属性值为true，或不设置属性值。
通过JavaScript代码设置$.mobile.page.prototype.options.domCache = true;

4.3 使用锚记

定义锚记的方法：<a name="anchor">命名锚记</a>
定位到锚记的方法：<a href="anchor">定位到命名锚记</a>

4.3.1 在单页视图中定义锚记

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(function () {
            $('a.scroll').bind('click vclick', function (ev) {
                var target = $($(this).attr('href')).get(0).offsetTop;
                $.mobile.silentScroll(target);
                return false;
            })
        })
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>命名锚记</h1>
    </div>
    <div data-role="content">
        <a class="scroll" href="#anchor" data-role="button">跳转到锚记位置</a>
        <div style="height: 1000px;"></div>
        <p><a name="anchor" data-role="button" id="anchor">命名锚记位置</a></p>
    </div>
    <div data-role="footer">

    </div>
</div>
</body>
</html>

4.3.2 在多页视图中定义锚记

后期补充

4.4 传递参数

在单页视图中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页视图中不需要与服务器进行通信，通常使用下列三种方法实现页面间的参数传递。

GET方法：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。
通过HTML5的Web Storage进行参数传递
设置全局变量，不推荐

4.4.1 以GET方式传递参数

4.4.2 通过HTML5 Web Storage 传递参数

使用sessionStorage存储在浏览器中，浏览器关闭，sessionStorage中内容会消失
使用localStorage存储在本地，类似cookie，除非主动删除，否则不会删除

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script>
        $('#page2').live('pageshow', function (event, ui) {
            alert("传递给第二个页面的参数是:" + sessionStorage.name);
        })
    </script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>第一页</h1>
    </div>
    <div data-role="content">
        <a href="#page2" onclick="sessionStorage.name=1" data-role="button">下一页1</a>
        <a href="#page2" onclick="sessionStorage.name=2" data-role="button">下一页2</a>
    </div>
    <div data-role="footer">

    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div data-role="content">
        <a href="#page1" data-role="button">返回第一页</a>
    </div>
</div>
</body>
</html>

效果图：

4.6 实战练习

4.6.1 记事本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <script>
        /**格式化字符串,将数字转换成几位数,前面补0
         * @return {string}
         */
        function prefixInteger(num, n) {
            return (new Array(n).join(0) + num).slice(-n);
        }
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = prefixInteger(date.getMonth() + 1, 2);
            var strDate = prefixInteger(date.getDate(), 2);
            var hours = prefixInteger(date.getHours(), 2);
            var minutes = prefixInteger(date.getMinutes(), 2);
            var seconds = prefixInteger(date.getSeconds(), 2);
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + hours + seperator2 + minutes
                    + seperator2 + seconds;
            return currentdate;
        }
        var session_id;
        function getName(id) {
            sessionStorage.name = null;
            sessionStorage.name = $('#content').find('ul').find(id).find('p').text();
        }
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        function guid() {
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
        function addt() {
            //获取文本输入框中的内容
            var text1 = $('#new').find('#note').val();
            if (text1 == "") {
                text1 = "您未输入任何内容";
            }
            //获取到Ul列表
            var ul = document.getElementById("ul");
            //创建元素Li
            var li = document.createElement("li");
            //向li中添加内容
//            li.innerHTML = text1;
            var _id = guid();
            session_id = _id;
            li.setAttribute("id", _id);
            li.setAttribute("onclick", "getName('#" + _id + "')");
            var a = document.createElement("a");
            a.setAttribute("href", "#detail");
            var h1 = document.createElement("h1");
            h1.innerHTML = getNowFormatDate();
            var p = document.createElement("p");
            p.innerHTML = text1;
            //向ul追加元素li
            ul.appendChild(li);
            li.appendChild(a);
            a.appendChild(h1);
            a.appendChild(p);
            $('#ul').listview('refresh');
        }
        jQuery.extend(jQuery.validator.message, {});
    </script>
</head>
<body>
<div data-role="page" id="home" data-title="记事本">
    <div data-role="header">
        <h1>记事本</h1>
        <a href="#new" data-icon="custom">新建</a>
    </div>
    <div data-role="content" id="content">
        <ul data-role="listview" id="ul">
            <!--<li id="list_item_1" onclick="getName('#list_item_1')">
                <a href="#detail">
                    <h1>2018/04/18</h1>
                    <p>如果我们能活着出去,万水千山你愿意陪我一起看么</p>
                </a>
            </li>
            <li id="list_item_2" onclick="getName('#list_item_2')">
                <a href="#detail">
                    <h1>2018/04/18</h1>
                    <p>前世叫你妖仙姐姐,今世叫你小白痴</p>
                </a>
            </li>-->
        </ul>
        <script>

        </script>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://www.w3school.com.cn/jquery/index.asp">Copyright @JQuery Mobile</a></li>
            </ul>
        </div>

    </div>
</div>
<div data-role="page" id="new" data-title="新建笔记本">
    <div data-role="header">
        <h1>新建笔记本</h1>
        <a href="#home" data-icon="back">返回</a>
    </div>
    <div data-role="content">
        <form>
            <label for="note">请输入内容</label>
            <textarea id="note" name="note" style="height: 100%;min-height: 200px;"></textarea>
        </form>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li id="save"><a href="#home" onclick="addt()" data-icon="arrow-u">保存</a></li>
            </ul>
        </div>

    </div>
    <script>
        $('#new').live('pageshow', function () {
            $('#note').val(null);
        })
    </script>
</div>
<div data-role="page" id="detail">
    <div data-role="header">
        <h1>详细内容</h1>
        <a href="#home" data-icon="back">返回</a>
    </div>
    <div data-role="content">
        <p id="p"></p>
        <script>
            $('#detail').live('pageshow', function () {
                document.getElementById("p").innerHTML = sessionStorage.name;
            })
        </script>
    </div>
</div>
<!--<div id="error">
    <div data-role="header">
        <h1>页标题</h1>
    </div>
    <div data-role="content">
        <p>您没有输入任何内容哦...</p>
        <p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
    </div>
</div>-->
</body>
</html>

效果图：

点击新建：

输入内容后：

点击保存:

点击其中一条:

第5章设计弹出页面

5.1 定义弹出页面

弹出页面包括弹出对话框，弹出菜单或嵌套菜单，弹出表单、图片、视频、弹出覆盖面板、地图等不同的形式。几乎所有能够用来“弹出”的页面元素，都可以通过一定的方式应用到弹出页面上。

弹出页面包括两个部分：弹出按钮和弹出页面，具体实现步骤如下:

1.定义弹出按钮。弹出按钮通常基于一个超链接实现，在超链接中，设置属性data_rel为“popup”，表示以弹出页面方式打开所指向的内容。

<a href="#popupTooltip" data-rel="popup" data-role="button" data-inline="true">提示框</a>

2.定义弹出框。弹出页面部分通常是一个div的DOM容器，为这个容器标签(一般为<div>)声明data-role属性，设置值为popup，表示以弹出方式呈现其中的内容。

<div data-role="popup" id="popupTooltip"></div>

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>定义弹出页</h1>
    </div>
    <div data-role="content">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupBasic" data-transition="pop"
           data-rel="popup">打开弹出页</a>
        <div id="popupBasic" data-role="popup">
            <p>这是一个简单的弹出框,没有任何设置</p>
        </div>
    </div>

    <div data-role="footer">

    </div>
</div>

</body>
</html>

效果图：

5.2 使用弹出页面

5.2.1 菜单和嵌套菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>定义弹出菜单</h1>
    </div>
    <div data-role="content">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a" href="#popupMenu"
           data-transition="slideup" data-rel="popup">弹出菜单</a>
        <div id="popupMenu" data-role="popup" data-theme="b">
            <ul style="min-width: 210px;" data-role="listview" data-inset="true">
                <li data-role="liost-divider">选择命令</li>
                <li><a href="#">查看代码</a></li>
                <li><a href="#">编辑</a></li>
                <li><a href="#">禁用</a></li>
                <li><a href="#">删除</a></li>
            </ul>
        </div>
    </div>
    <div data-role="footer">

    </div>
</div>
</body>
</html>

效果图：

猴子是monkey

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery Mobile 随笔

第1章初识JQuery Mobile1.1 安装JQuery mobile 环境1.2 开发第一个JQuery Mobile 页面第2章 HTML5基础第3章设计页面和对话框3.1 设计页面3.1.1 定义单页3.1.2 定义多页3.1.3 定义外部页3.2 设计对话框3.2.1 定义对话框3.2.2 定义关闭对话框
复制链接

扫一扫