目录
在开始之前，先给一个基本的 MUI 界面，最基本的要有头部、主体和底部这三种元素：
<!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"/>
<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
/*.mui-content .mui-icon-camera{
color: green;
}*/
.myicon{
color: blue;
font-size:70px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav"><!--快捷键： mh-->
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
<span class="mui-icon mui-icon-bars mui-pull-right"></span>
</header>
<div class="mui-content"> <!--快捷键： mb-->
<h1>Hello world!</h1>
<span class="mui-icon mui-icon-trash"></span>
<span class="mui-icon-extra mui-icon-extra-calendar myicon"></span>
<span class="mui-icon-extra mui-icon-extra-calendar"></span>
</div>
<nav class="mui-bar mui-bar-tab"><!--快捷键： mt-->
<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">
<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>
</body>
</html>其演示效果为
1、MUI 图标
mui 默认提供了手机 app 开发常用的字体图标，使用方法为：
mui-icon mui-icon-(name)
//例：
<span class="mui-icon mui-icon-weixin"></span>也可以扩展第三方图标字体，其使用方法：添加字体文件，编写 CSS 文件，使用图标；具体就不再进行示例。
2、MUI 按钮
MUI 默认按钮为灰色，颜色有蓝色 ( blue )、绿色 ( green )、黄色 ( yellow )、红色 ( red )和紫色 (purple) ，其分别对应五种场景，分别为：primary 、success 、warning 、danger 、royal 。其用法为：
mui-btn mui-btn-(颜色|场景)图标按钮类型有四种：普通按钮、无底色按钮 ( mui-btn-outlined )、块级按钮 ( mui-btn-block )、图标按钮 ( mui-icon mui-icon-(name) mui-right | mui-left )（代码块为 mbutton，快捷键提示：mb）。另外还可以写加载中的按钮，不过是要用 js 来实现，其关键语句为：
mui(btnElement).button('loading');
mui(btnElement).button('reset');下面给出一个演示较为全面的例子：
<!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" />
<style type="text/css">
.mybtn{
background: black;
color: white;
border-radius: 20px;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">按钮应用</h1>
</header>
<div class="mui-content">
<h5>基本按钮</h5>
<button>按钮1</button>
<button type="button" class="mui-btn">按钮</button>
<button type="button" class="mui-btn mui-btn-blue">按钮</button>
<button type="button" class="mui-btn mui-btn-green">按钮</button>
<button type="button" class="mui-btn mui-btn-danger mybtn">按钮</button>
<button type="button" class="mui-btn mybtn">按钮</button>
<h5>块级按钮</h5>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<h5>无背景色按钮</h5>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
<h5>图标按钮</h5>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block ">
<span class="mui-icon mui-icon-weixin"></span>
图标按钮</button>
<h5>加载按钮用法</h5>
<button type="button" class="mui-btn mui-btn-blue" id="btn">点击加载</button>
</div>
<script type="text/javascript">
document.getElementById("btn").addEventListener("tap",function(){
mui(this).button("loading"); //按钮状态改变
setTimeout(function(){
mui(this).button("reset");
}.bind(this),3000);
});
</script>
</body>
</html>其演示结果为：
3、角标
角标用于进行数量显示，常和其他控件（列表、按钮、图标选项卡等配合使用），其类名为：mui-badge （代码块为 badge） ，其还有多个类型：实心数字 ( mui-badge-blue , mui-badge-green 等 )、无前景 ( mui-badge-inverted )、无背景带边框 ( 添加 style=" border : 1px solid red ; padding : 2px 4px " ) 。
如下面实例：
<!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" />
<style type="text/css">
.mui-badge.mybadge{
border: 1px solid red;
padding:2px 4px;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">角标</h1>
</header>
<div class="mui-content">
<h5>角标1</h5>
<span class="mui-badge mui-badge-blue">1</span>
<span class="mui-badge mui-badge-red">99+</span>
<h5>角标2</h5>
<span class="mui-badge mui-badge-inverted mui-badge-blue mybadge">8</span>
<span class="mui-badge mui-badge-inverted mui-badge-green">999</span>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-blue">1</span>
Item 1
</a>
</li>
</ul>
</div>
</body>
</html>其演示结果为：
4、消息框
| 组件名 | 作用 | 用法 |
| alert | 警告框 | mui.alert ( message , title , btnValue , callback [,type] ) |
| confirm | 确认框 | mui.confirm ( message , title , [btnValues] , callback[,type]) |
| prompt | 输入对话框 | mui.prompt ( message , placeholder , title , [btnValues] , callback[,type]) |
| toast | 消息提示框 | mui.toast ( message[,options]) |
见实例：
<!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" />
<style type="text/css">
.mui-popup{
border-radius: 0px;
}
.mui-popup-inner{
border-radius: 0px;
}
.mui-popup-button:first-child:last-child {
border-radius: 0px;
}
.mui-popup-button:last-child {
border-radius: 0px;
}
.mui-popup-button:first-child {
border-radius: 0px;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">消息框</h1>
</header>
<div class="mui-content">
<button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">警告框</button>
<button id="btn2" type="button" class="mui-btn mui-btn-blue mui-btn-block">确认框</button>
<button id="btn3" type="button" class="mui-btn mui-btn-blue mui-btn-block">输入框</button>
<button id="btn4" type="button" class="mui-btn mui-btn-blue mui-btn-block">消息提示框</button>
</div>
<script type="text/javascript">
document.getElementById("btn1").addEventListener("tap",function(){
mui.alert("警告框内容。","警告框","OK了.....",function (event){
console.log(event);
},"div"); //div：用HTML5方式显示，不加此参数用手机的原生对话框显示
});
document.getElementById("btn2").addEventListener("tap",function(){
mui.confirm("确认框内容。","确认框",["是","否","取消"],function (event){
console.log(event);
},"div");
});
document.getElementById("btn3").addEventListener("tap",function(){
mui.prompt("确认框内容。","请输入学号...","确认框",["是","否","取消"],function (event){
console.log(event);
},"div");
});
document.getElementById("btn4").addEventListener("tap",function(){
mui.toast("消息提示.....");
});
</script>
</body>
</html>其演示效果如下：
