一、打开子页面

mui.init({

    subpages:[{

      url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址

      id:your-subpage-id,//子页面标志

      styles:{

        top:subpage-top-position,//子页面顶部位置

        bottom:subpage-bottom-position,//子页面底部位置

        width:subpage-width,//子页面宽度，默认为100%

        height:subpage-height,//子页面高度，默认为100%

        ......

      },

      extras:{}//额外扩展参数

    }]

  });

　　子页面相当于在html中使用iframe，所有的浏览器都支持，不依赖h5+api，但是没办法控制创建时隐藏页面，而且显示动画效果只能是"fade-in"；

　　另外，如果子页面已经显示，但是被其它子页面遮盖时，再次显示时，不会有动画效果，解决办法是，先隐藏，然后再显示。

二、打开新页面（非子页面）

mui.openWindow({

    url:new-page-url,

    id:new-page-id,

    styles:{

      top:newpage-top-position,//新页面顶部位置

      bottom:newage-bottom-position,//新页面底部位置

      width:newpage-width,//新页面宽度，默认为100%

      height:newpage-height,//新页面高度，默认为100%

      ......

    },

    extras:{

      .....//自定义扩展参数，可以用来处理页面间传值

    },

    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示

    show:{

      autoShow:true,//页面loaded事件发生后自动显示，默认为true

      aniShow:animationType,//页面显示动画，默认为”slide-in-right“；

      duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；

    },

    waiting:{

      autoShow:true,//自动显示等待框，默认为true

      title:'正在加载...',//等待对话框上显示的提示内容

      options:{

        width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度

        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度

        ......

      }

    }

})

mui框架在打开新页面时等待框的处理逻辑为：

　　显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框；

因此，只有当新页面为新创建页面（webview）时，会显示等待框，否则若为预加载好的页面，则直接显示目标页面，不会显示等待框。

三、预加载页面

方式1：

mui.init({

  preloadPages:[

    {

      url:prelaod-page-url,

      id:preload-page-id,

      styles:{},//窗口参数

      extras:{},//自定义扩展参数

      subpages:[{},{}]//预加载页面的子页面

    }

  ],

  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制

});

　　可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败。

方式2：

var page = mui.preload({

    url:new-page-url,

    id:new-page-id,//默认使用当前页面的url作为id

    styles:{},//窗口参数

    extras:{}//自定义扩展参数

});

　　可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用。

最后显示页面：

方式1：plus.webview.show("xx");

方式2：mui.openWindow({id: "xxx"});

　　使用预加载，在需要显示时立即进行显示，可以节省新页面的创建时间。这两种预加载的方式都依赖h5+api，直接打开浏览器看不到效果，必须在模拟器或真机上调试。

四、使用div的方式模拟页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="../css/mui.min.css">

        <script src="../js/mui.min.js "></script>

        <script src="../js/mui.view.js "></script>

        <style>

            .mui-views,

            .mui-view,

            .mui-pages,

            .mui-page,

            .mui-page-content {

                position: absolute;

                left: 0;

                right: 0;

                top: 0;

                bottom: 0;

                width: 100%;

                height: 100%;

            }

            /* 所有页面默认隐藏 */

            .mui-page {

                display: none;

            }

            /* 标题栏高46px，所以主页面顶部向下偏移46px */

            .mui-pages {

                top: 46px;

                height: auto;

            }

            /* 只显示主页面 */

            .mui-pages .mui-page {

                display: block;

            }

            /* 页面切换动画（显示和隐藏时都需要） */

            .mui-transitioning {

                -webkit-transition: -webkit-transform 200ms linear;

                transition: transform 200ms linear;

            }

            .mui-page-left {

                -webkit-transform: translate3d(0, 0, 0);

                transform: translate3d(0, 0, 0);

            }

        </style>

    </head>

    <body>

        <!--页面主结构开始-->

        <div id="app" class="mui-views">

            <div class="mui-view">

                <div class="mui-navbar">

                </div>

                <div class="mui-pages">

                </div>

            </div>

        </div>

        <!--默认显示的主页面-->

        <div id="main_page" class="mui-page">

            <!--页面标题栏-->

            <div class="mui-navbar-inner mui-bar mui-bar-nav">

                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">

                    <span class="mui-icon mui-icon-left-nav"></span>

                </button>

                <h1 class="mui-center mui-title">主页面</h1>

            </div>

            <!--页面主内容区-->

            <div class="mui-page-content">

                <div class="mui-scroll-wrapper">

                    <div class="mui-scroll">

                        <ul class="mui-table-view mui-table-view-chevron">

                            <li class="mui-table-view-cell">

                                <a href="#page1" class="mui-navigate-right">打开页面1</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a href="#page2" class="mui-navigate-right">打开页面2</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a href="#page3" class="mui-navigate-right">打开页面3</a>

                            </li>

                        </ul>

                        <ul class="mui-table-view">

                            <li class="mui-table-view-cell" style="text-align: center;">

                                <a id='exit'>退出</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <!--页面1-->

        <div id="page1" class="mui-page">

            <!--页面标题栏-->

            <div class="mui-navbar-inner mui-bar mui-bar-nav">

                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">

                    <span class="mui-icon mui-icon-left-nav"></span>

                </button>

                <h1 class="mui-center mui-title">页面1</h1>

            </div>

            <!--页面主内容区-->

            <div class="mui-page-content">

                <div class="mui-scroll-wrapper">

                    <div class="mui-scroll">

                        <ul class="mui-table-view mui-table-view-chevron">

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮1</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮2</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮3</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <!--页面2-->

        <div id="page2" class="mui-page">

            <!--页面标题栏-->

            <div class="mui-navbar-inner mui-bar mui-bar-nav">

                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">

                    <span class="mui-icon mui-icon-left-nav"></span>

                </button>

                <h1 class="mui-center mui-title">页面2</h1>

            </div>

            <!--页面主内容区-->

            <div class="mui-page-content">

                <div class="mui-scroll-wrapper">

                    <div class="mui-scroll">

                        <ul class="mui-table-view mui-table-view-chevron">

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮1</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮2</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮3</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <!--页面3-->

        <div id="page3" class="mui-page">

            <!--页面标题栏-->

            <div class="mui-navbar-inner mui-bar mui-bar-nav">

                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">

                    <span class="mui-icon mui-icon-left-nav"></span>

                </button>

                <h1 class="mui-center mui-title">页面3</h1>

            </div>

            <!--页面主内容区-->

            <div class="mui-page-content">

                <div class="mui-scroll-wrapper">

                    <div class="mui-scroll">

                        <ul class="mui-table-view mui-table-view-chevron">

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮1</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮2</a>

                            </li>

                            <li class="mui-table-view-cell">

                                <a class="mui-navigate-right">按钮3</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <script>

            mui.init();

             //初始化单页view

            var viewApi = mui('#app').view({

                defaultPage: '#main_page'

            });

            var oldBack = mui.back;

            mui.back = function() {

                if (viewApi.canBack()) { //如果view可以后退，则执行view的后退

                    viewApi.back();

                } else { //执行webview后退

                    oldBack();

                }

            };

        </script>

    </body>

</html>

　　注意这里面的css样式必须要写，否则切换页面会不正常。

五、关闭页面

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：

　　1）若当前webview为预加载页面，则hide当前webview；

　　2）否则，close当前webview；

如果我们使用div模拟页面，需要自己响应back方法，处理div显示隐藏：

var viewApi = mui('#app').view({

    defaultPage: '#main_page'

});

var oldBack = mui.back;

mui.back = function() {

    if (viewApi.canBack()) { //如果view可以后退，则执行view的后退

        viewApi.back();

    } else { //执行webview后退

        oldBack();

    }

};

MUI——页面的创建、显示、关闭的更多相关文章

  1. HTML5+和MUI页面操作

    最近总是碰到针对页面的一些操作,以下是针对webview的一些简单方法以及个人理解.更多详尽的内容请参考标准文档:http://www.html5plus.org/doc/zh_cn/webview. ...

  2. 简述在Js或Vue中监听页面的刷新、关闭操作

    1.背景 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.而最近在做项 ...

  3. HTML <hr /> 标签 在页面中创建一条水平线

    一,定义和用法 <hr /> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 二,HTML 与 XHTML 之间的 ...

  4. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  5. MUI框架a链接href跳转失效解决方法，解决MUI页面不会滚动的方法

    //解决 所有a标签 导航不能跳转页面 mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决MUI ...

  6. golang 创建一个简单的连接池，减少频繁的创建与关闭

    一.连接池的描述图片如下: 二.连接池代码如下: package main; import ( "time" "sync" "errors" ...

  7. mui 页面滚动解决方案

    默认情况下mui 页面不能滚动,以下为解决方案: 1. mui('.mui-scroll-wrapper').scroll({  deceleration: 0.0005 //flick 减速系数,系 ...

  8. mui 页面传值

    点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面 现在提供两种实现方式 注意:需要在手机运行才可以,用电脑浏览器可能不支持. 第一种方式  页面已创建,通过自定义事件传值 fir ...

  9. shiro 静态页面资源不显示 解决方案（转）

    最近做一个ssm+shiro的框架整和 不加shiro之前ssm中css和图片显示正常.加上以后无法显示. 解决方案: shiro有静态资源过滤. 配置资源匿名访问即可 <property na ...

随机推荐

  1. cocos2d-x protobuf; cocos2dx protocol buffer

    昨天了解到项目要用到protocol buffer,今天晚上看了一下,了解protobuf本质上就是一个信息表达协议+编辑,解析库. linux开源软件都一个模式,先./configure --hel ...

  2. 安装javaUbuntu下安装JDK1.6,并将之设为默认的JDK

    本篇文章个人在广东逛街的时候突然想到的...最近就有想写几篇关于安装java的博客,所以回家到之后就奋笔疾书的写出来发表了 1.在Windows系统下下载Liunx 版本JDK,我下的是jdk-6u4 ...

  3. 打破惯性思维：聊聊一次debug

    最近公司的新需求中要增加活动营销,整个组的人都被安排去研究某成熟产品的实现.我也认真地在看webService部分的实现,发现了一个诡异的10614端口的请求. 代码如下图: 这是一段服务端发请求验证 ...

  4. Servlet的ClassLoader

    摘自深入java web技术内幕修订版

  5. OGG学习笔记01-基础概述

    OGG学习笔记01-基础概述 OGG(Oracle Golden Gate),最近几年在数据同步.容灾领域特别火,甚至比Oracle自己的原生产品DataGuard还要风光,主要是因为其跨平台.跨数据 ...

  6. 【Zookeeper】源码分析之Watcher机制（二）

    一.前言 前面已经分析了Watcher机制中的第一部分,即在org.apache.zookeeper下的相关类,接着来分析org.apache.zookeeper.server下的WatchManag ...

  7. php集成环境和自己配置的区别，php集成环境、php绿色集成环境、php独立安装版环境这三者的区别

    最近有学生问我,直接使用PHP集成环境和我们自己独立安装的php环境有什么不一样吗? 答:PHP集成环境,和自己安装的php环境实际上没啥区别的,只不过大部分的集成环境进行了一些绿化操作,本质上没啥区 ...

  8. React一些必须要知道的基础

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...

  9. Normalize.css 样式作用，及使用方法

    Normalize.css 是? Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一. Normalize.css 能干什么? 保留有用的默认值,不 ...

  10. angularJS 自定义元素和属性

    创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...