MUI框架-08-窗口管理-创建子页面

之前写过这一篇，不知道为什么被删了，我就大概写了，抱歉
创建子页面是为了，页面切换时，外面的页面不动，让 MUI 写出来的页面更接近原生 app
官方文档：http://dev.dcloud.net.cn/mui/window/#subpage

创建子页面

1.在HBuilder 新建移动app项目，选择 mui
3.新建html目录用来存放html文件，新建含 mui 的HTML文件
- 在 Hbuilder 中，新建HTML文件，选择”含 mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了 mui 的js、css资源引用
3.打开index.html 文件
4.在body里面，输入mheader
- 顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏
5.在body里面，输入mbody
- 除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块
6.找到页面中一对 script 便签，里面含有 init()
7.将这对标签剪切到 header 头部和nav 脚部，标签的位置，这个应该很容易理解，就是我们加载页面的地方
8..写入如下代码;

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

		mui.init({

    subpages:[{

      url:'html/content.html',//根据自己的目录修改

      id:'content.html',//随意

      styles:{

        top:'45px',//mui标题栏默认高度为45px；

        bottom:'0px'//默认为0px，可不定义；

      }

    }]

  });

		</script>

9.然后打开在 html 目录下那个新建的 html文件，拷贝如下代码：

<!doctype html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

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

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

	</head>

	<body>

		<div class="mui-content">

		  	<div class="mui-slider">

				<div class="mui-slider-group">

					<!--第一个内容区容器-->

					<div class="mui-slider-item">

						<!-- 具体内容 -->

						<img src="../img/1D52F569E73F611465E9BB3656E9628B.png"/>

					</div>

					<!--第二个内容区-->

					<div class="mui-slider-item">

						<!-- 具体内容 -->

						<img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png"/>

					</div>

				</div>

			</div>

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

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">

		            <div class="mui-media-body">

		                幸福

		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

		            </div>

		        </a>

		    </li>

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">

		            <div class="mui-media-body">

		                木屋

		                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>

		            </div>

		        </a>

		    </li>

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">

		            <div class="mui-media-body">

		                幸福

		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

		            </div>

		        </a>

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">

		            <div class="mui-media-body">

		                幸福

		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

		            </div>

		        </a>

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">

		            <div class="mui-media-body">

		                幸福

		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

		            </div>

		        </a>

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

		        <a href="javascript:;">

		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">

		            <div class="mui-media-body">

		                幸福

		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

		            </div>

		        </a>

		    </li>

		</ul>

		</div>

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

		<script type="text/javascript">

			mui.init()

		</script>

	</body>

</html>

这时候回到 index 页面预览看到的依然像是一个页面，实际不是的，在单个页面时候不容易体现这种优势，当通过底部标签切换页面的时候，就可以体会到了，头部和底部是不动的，接近原生app 的体验

官方文档

更多文章链接：MUI 框架

- 本笔记不允许任何个人和组织转载

MUI框架-08-窗口管理-创建子页面的更多相关文章

MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
Ionic2开发笔记（2）创建子页面及其应用
1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...
layer.open弹出窗口后在子页面修改弹窗的title
在子页面修改layer.open弹窗的title,代码如下: var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索 ...
Hbuilder开发HTML5 APP之创建子页面
折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({ subpages:[{ id:"list", url: ...
MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...
MUI框架-01-介绍-创建项目-简单页面
MUI框架-01-介绍-准备-创建项目从0开始快速高效学习 MUI 框架官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...
MUI窗口管理
参考:窗口管理 http://dev.dcloud.net.cn/mui/window/ 页面初始化:在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,m ...
MUI框架-02-注意事项-适用场景-实现页面间传值
MUI框架-02-注意事项-适用场景-实现页面间传值关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项有 ...
mui框架如何实现页面间传值
mui框架如何实现页面间传值我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

随机推荐

后台开发面试题（.net与java）
最近面试了几家公司,发现大部分公司面试题有相似的地方.现在此记录下我还记得的一些题: JAVA部分: 1.Java Map 按Key排序和按Value排序: 参考链接:Java Map 按Key排序和 ...
Python SSLError
最近老是遇到这个问题. SSLError(SSLError(1, '[SSL: CERTIFIC ATE_VERIFY_FAILED] certificate verify failed (_ssl. ...
c#StreamWriter,StreamReader类（主要用于文本文件访问）
1.为什么要使用StreamReader或者StreamWriter 如果对文本文件需要读取一部分显示一部分则使用FileStream会有问题,因为可能FileStream会在读取的时候把一个汉字的字 ...
五、 OpenERP 输出日志
import logging from openerp.osv import orm _logger = logging.getLogger(__name__) class project_task_ ...
hibernate基本配置
将讲解表名类名不一致.属性名列名不一致.不持久化某属性.Date类型的注解.枚举类型的注解(枚举类型在xml配置有点麻烦不说了),说明都在代码注释里. 项目目录: 注解方式以Teacher类为例,xm ...
第3章—高级装配—条件化的Bean
条件化的Bean 通过活动的profile,我们可以获得不同的Bean.Spring 4提供了一个更通用的基于条件的Bean的创建方式,即使用@Conditional注解. @Conditional根 ...
*2.3.2_加入env
在验证平台中加入reference model.scoreboard等之前,思考一个问题:假设这些组件已经定义好了,那么在验证平台的什么位置对它们进行实例化呢?在top_tb中使用run_test进行 ...
王亮：游戏AI探索之旅——从alphago到moba游戏
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙发表于云+社区专栏演讲嘉宾:王亮,腾讯AI高级研究员.2013年加入腾讯,从事大数据预测以及游戏AI研发工作.目前 ...
JAVA标签
java没有GOTO,可以通过标签实现跳转. 在 Java 里唯一需要用到标签的地方就是拥有嵌套循环,而且想中断或继续多个嵌套级别的时候. 使用位置:用在循环语句之前.----它实际需要紧靠在循环语句 ...
Kernel的IIC驱动分析
涉及到的文件: drivers/i2c/i2c-core.c drivers/i2c/i2c-dev.c drivers/i2c/busses/i2c-imx.c 等等在下面分析的代码中,不想关或者 ...

MUI框架-08-窗口管理-创建子页面

MUI框架-08-窗口管理-创建子页面

创建子页面

更多文章链接：MUI 框架

MUI框架-08-窗口管理-创建子页面的更多相关文章

随机推荐

热门专题