目錄
在開始之前，先給一個基本的 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>
其演示效果如下：
