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-窗口管理-创建子页面的更多相关文章

  1. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  2. Ionic2开发笔记(2)创建子页面及其应用

    1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml      这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...

  3. layer.open弹出窗口后在子页面修改弹窗的title

    在子页面修改layer.open弹窗的title,代码如下: var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索 ...

  4. Hbuilder开发HTML5 APP之创建子页面

    折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({   subpages:[{    id:"list",   url: ...

  5. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  6. MUI框架-01-介绍-创建项目-简单页面

    MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...

  7. MUI窗口管理

    参考:窗口管理 http://dev.dcloud.net.cn/mui/window/ 页面初始化:在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,m ...

  8. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  9. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

随机推荐

  1. [性能测试]:内存泄漏以及MAT(Memory Analyzer Tool)工具使用分析

    一.今天在查看服务器时候,发现内存使用率直接就到99%了, 二.用ps -uaxw查看一下,每个占用内存较多的进程情况: 三,挑出可疑的进程,生成dump文件: jmap -dump:format=b ...

  2. Mac下Go2Shell配合ITerm2无法定位到当前文件夹目录的解决方法

    下载最新版,这个问题在最新版已经完美解决. http://zipzapmac.com/go2shell

  3. jni使用javap查看java类方法签名

    在Jni开发中,需要回调给java层数据,因此使用java的方法签名是必不可少的. 快速定位java方法签名的方式: java方法签名由(函数参数列表)返回值组成. cmd运行:javap -s 字节 ...

  4. java外观模式(Facade)

    1.外观模式(Facade [fə'sɑd] n. 正面:表面:外观) 外观模式:可以理解为 中介模式(没错,就是在用户与系统之间,增加了一个类,而这个类就是外观类,所以这个模式就叫外观模式) 如下图 ...

  5. Java线程池及其底层源码实现分析

    1.相关类 Executors  ExecutorService   Callable   ThreadPool     Future 2.相关接口 Executor Executor接口的使用: p ...

  6. CSS3动画积累+动画库+3d动画

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  7. laravel5.4学习--laravel目录结构

    Laravel目录结构分析 app目录:主要是存放自己开发的应用代码(里面主要书写 控制器和模型和路由文件) bootstrap目录:laravel启动目录 config目录:主要是存放配置文件信息 ...

  8. [转]The NTLM Authentication Protocol and Security Support Provider

    本文转自:http://davenport.sourceforge.net/ntlm.html#ntlmHttpAuthentication The NTLM Authentication Proto ...

  9. Java 防SQL注入过滤器(拦截器)代码

    原文出自:https://blog.csdn.net/seesun2012 前言 浅谈SQL注入:        所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符 ...

  10. facebook 登录开发记录

    1.注册一个 facebook 的账号 2.进入 facebook 开发者的网站.(也可以在 facebook 登录后,点击自己的名字进入用户信息页面,在该页面的底部有个“更多”的链接,点击进去会看到 ...