MUI
MUI概述:
MUI是一款APP的前端框架
进入官网可以浏览更加全面的API
特点:
追求性能体验,是启动MUI项目的首要目标,轻量必然是重要特征;
MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
第一个MUI项目:
打开HBuilder,右键新建项目选择APP,选择带有mui项目的模板就可以生成第一个mui项目
创建好后自动生成一些文件
打开首页后里面自动为我们导入了对应的css文件和js文件。
官网:顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏。
根据官网的提示,我们输入输入mheader
后,可以生成一个带有箭头的头部信息
<!--
声明头部栏mui-bar
头部栏是一个导航形式mui-bar-nav
-->
<header class="mui-bar mui-bar-nav">
<!--
mui-action-back声明一个后退的样式:
action行动
back后退
-->
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
生成头部导航后,我们继续输入下列代码:
<!--
mui-bar声明底部栏
mui-bar-tab底部栏是一个表格形式
-->
<footer class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</footer>
生成一个底部导航栏。
从上面代码可以了解到几个标签的含义:
- mui-bar:意为声明一个导航栏,-后面的不同参数,决定了其位置和定位的不同
- nav表示以单个形式出现的导航多为头部
- mui-bar-tab中每一项的标签需要有
mui-tab-item
的声明
- mui-bar-tab中每一项的标签需要有
- tab表示以表格形式出现的导航多为底部
导航中有的照片信息时MUI里自带的,比如我们创建的底部栏并没有导入图片,却有不同的图标
- nav表示以单个形式出现的导航多为头部
接下来我们创建一个简单的折叠面板:
<!--
折叠面板
-->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
可以发现,并没有出现对应的页面,是因为mui-bar
标签声明的都为固定定位,会将一部分内容遮挡,官网也给我出们提示:
官网:除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content
控件内,在Hbuilder中输入mbody
,可快速生成包含.mui-content
的代码块。
所以切记,所有的内容一定要放进mui-content
标签中也就是我们输入mbody生成的代码块中
<div class="mui-content">
<!--
折叠面板
-->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
</div>
页面跳转:
由于mui框架屏蔽了onclick和href事件。所以不能用常规的a标签和onclick点击事件来跳转,只能来绑定监听事件来实现,
参考:
页面跳转
个人喜欢用第三种
示例:
首先创建一个新的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>这是phone</h1>
</body>
</html>
实现点击电话按钮,跳转到新html页面中:
html:
<a class="mui-tab-item mui-active" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
js:
<script type="text/javascript" charset="utf-8">
mui.init();
document.getElementById("phone").addEventListener("tap",function(){
mui.openWindow("phone.html","ID");
})
</script>
尝试后成功点击跳转。
tap可以理解为点击事件