<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

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

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

    <script type="text/javascript" charset="utf-8">

    /*提前预加载其他页面，这样再打开已加载好的页面就会有很好的效果了*/

          mui.init({

              preloadPages:[{

                  url :'tel.html',

                  id: "tel.html",

                  extras:{name:'小明', age:18}

              }]

          });

    </script>

</head>

<body>

<!--<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>-->

<nav class="mui-bar mui-bar-tab">

    <a class="mui-tab-item mui-active">

        <span class="mui-icon mui-icon-home"></span>

        <span class="mui-tab-label">首页</span>

    </a>

    <a class="mui-tab-item" id="open_tel"><!--onclick="openTel()"-->

        <span class="mui-icon mui-icon-phone"></span>

        <span class="mui-tab-label">电话</span>

    </a>

    <a class="mui-tab-item">

        <span class="mui-icon mui-icon-email"></span>

        <span class="mui-tab-label">邮件</span>

    </a>

    <a class="mui-tab-item">

        <span class="mui-icon mui-icon-gear"></span>

        <span class="mui-tab-label">设置</span>

    </a>

</nav>

<div class="mui-content">

    <!--跳转链接可以用a链接-->

<!--    /*打开新页面的方式 1*/-->

    <a href="tel.html">打电话</a>

    <!--    /*打开新页面的方式 3*/-->

    <button type="button" onclick="tel()">打电话</button>

</div>

</body>

<script type="text/javascript">

    /*对页面初始化的方法  mui.plusReady(function(){})*/

    /*创建子页面， 以防数据多，出现卡顿的事情发生*/

    /*mui.init({

        subpages:[{

            url : 'list.html',

            id  : 'list.html',

            styles : {

                top: '200px',

                bottom: '0px'

            }

        }]

    })*/

    /*打开新页面的方式 2*/

    //跳转链接可以用原生组件

    /*mui.plusReady(function(){})*/

        document.getElementById('open_tel').addEventListener('tap',function(){

            mui.openWindow({

                url: 'tel.html',

                id: 'tel.html'

            })

        })

    /*打开新页面的方式 3*/

    //也可以自定义个onclick()点击事件

    //并且还可以传递值

    function tel(){

        mui.openWindow({

            url: 'tel.html',

            id: 'tel.html',

            extras: {name:'小明',age:18}

        })

    }

</script>

</html>

mui 窗口管理及窗口之间的数据传递的更多相关文章

  1. （转载）Javascript操作表单之间的数据传递

    (转载)http://www.aspxhome.com/javascript/skills/200710/214825.htm 今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的 ...

  2. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

  3. Vue 爬坑之路（二）—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  4. 解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  5. JSP、servlet、SQL三者之间的数据传递

    JSP.servlet.SQL三者之间的数据传递 博客分类: web开发 JSPservletSQL数据库连接池web开发  前言: 最近一直在做WEB开发,现总结一下这一段时间的体会和感触. 切记, ...

  6. （转）Vue 爬坑之路（二）—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  7. ASP.NET MVC3中Controller与View之间的数据传递

    在ASP.NET MVC中,经常会在Controller与View之间传递数据,因此,熟练.灵活的掌握这两层之间的数据传递方法就非常重要.本文从两个方面进行探讨: 一.  Controller向Vie ...

  8. Activity之间的数据传递

    最常用的Activity之间的数据传递. btnStartAty1.setOnClickListener(new View.OnClickListener() { @Override public v ...

  9. ASP.NET MVC 之控制器与视图之间的数据传递

    今天,我们来谈谈控制器与视图之间的数据传递. 数据传递,指的是视图与控制器之间的交互,包括两个方向上的数据交互,一个是把控制器的数据传到视图中,在视图中如何显示数据,一个是把视图数据传递到控制器中, ...

  10. iOS开发中视图控制器ViewControllers之间的数据传递

    iOS开发中视图控制器ViewControllers之间的数据传递 这里我们用一个demo来说明ios是如何在视图控制器之间传递重要的参数的.本文先从手写UI来讨论,在下一篇文章中讨论在storybo ...

随机推荐

  1. [原创]Delphi XE10 dxLayoutControl 控件应用指南

    DevExpress VCL套件是一套非常强大的界面控件,可惜关于Delphi开发方面的说明太少,有些控件使用起来一头雾水,不知从何下手.本节详细介绍在Delphi Xe10 Seattle中如何利用 ...

  2. grid - 网格项目对齐方式（Box Alignment）

    CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...

  3. 微信支付 python版

    需求: 微信打开商品列表页面-> 点击商品后直接显示付款页面-> 点击付款调用微信支付 说明 微信支付需要你申请了公众号(appid, key - 用于签名), 商户号(mch_id, A ...

  4. 使用idea对spring boot项目打jar和war包[文件]

    pom.xml文件编写 打JAR包时 <groupId>com.netcorner</groupId> <artifactId>demo</artifactI ...

  5. linux驱动面试题整理

    1.字符型驱动设备你是怎么创建设备文件的,就是/dev/下面的设备文件,供上层应用程序打开使用的文件? 答:mknod命令结合设备的主设备号和次设备号,可创建一个设备文件. 评:这只是其中一种方式,也 ...

  6. css 定位（fixed > absolute > relative）与层级zIndex 的权限认知

    原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...

  7. 关于asyncio知识（二）

    一.asyncio之—-入门初探 通过上一篇关于asyncio的整体介绍,看过之后基本对asyncio就有一个基本认识,如果是感兴趣的小伙伴相信也会尝试写一些小代码尝试用了,那么这篇文章会通过一个简单 ...

  8. Java基础（三）面向对象（下）

    接口 接口中成员修饰符是固定的: 成员常量:public static final 成员函数:public abstract 通过接口间接实现了多重继承 接口的特点 接口是对外暴露的规则 接口是程序的 ...

  9. Kafka#4：存储设计 分布式设计 源码分析

    https://sites.google.com/a/mammatustech.com/mammatusmain/kafka-architecture/4-kafka-detailed-archite ...

  10. 【原创 Hadoop&Spark 动手实践 6】Spark 编程实例与案例演示

     [原创 Hadoop&Spark 动手实践 6]Spark 编程实例与案例演示 Spark 编程实例和简易电影分析系统的编写 目标: 1. 掌握理论:了解Spark编程的理论基础 2. 搭建 ...