移动端问题

1.<meta content="no" name="apple-mobile-web-app-capable">删除默认的苹果工具栏和菜单栏
需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
2.<meta name=”apple-mobile-web-app-status-bar-style” content=black” />默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

---

MUI 下拉刷新: mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview） [mui.min.css文件路径](https://cdn.muicss.com/mui-0.0.1/css/mui.min.css) [mui.min.js文件路径](https://cdn.muicss.com/mui-0.0.1/js/mui.min.js)

---

accordion（折叠面板）

<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>

---

actionsheet（操作表）

<button onclick="sheet1toggle()">actionsheet</button>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>
<script>
function sheet1toggle(){
	mui('#sheet1').popover('toggle');
}
</script>

---

badge（数字角标）

<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>

若无需底色，则增加.mui-badge-inverted类

<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">123</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">45</span>
<span class="mui-badge mui-badge-purple mui-badge-inverted">456</span>

---

button（按钮）

<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button> 

若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类

<button type="button" class="mui-btn mui-btn-outlined">默认</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button> 

---

加载中按钮

<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary" id="sure">确认</button>
<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary mui-btn-outlined" id="sure2">确认</button>
<button type="button" data-loading-text="提交中" class="mui-btn" id="sure3">确认</button>
<button type="button" data-loading-icon-position="right" class="mui-btn" id="sure4">确认</button>
<script>
mui("#sure").button('loading');//切换为loading状态
mui("#sure2").button('loading');//切换为loading状态
mui("#sure3").button('loading');//切换为loading状态
mui("#sure4").button('loading');//切换为loading状态
mui("#sure4").button('reset');//重置
</script>

---

cardview（卡片视图）

<div class="mui-card">
	<!--页眉，放置标题-->
	<div class="mui-card-header">这是一个页眉</div>
	<!--内容区-->
	<div class="mui-card-content">这是一个内容区这是一个内容区这是一个内容区这是一个内容区这是一个内容区</div>
	<!--页脚，放置补充信息或支持的操作-->
	<div class="mui-card-footer">这是一个页脚</div>
</div>

卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可

<style>
.header{
	background-image: url(./img/cdb.jpg);
}
.body{
	background-image: url(./img/bg.jpg);
}
</style>
<div class="mui-card">
	<!--页眉，放置标题-->
	<div class="header mui-card-header mui-card-media">
		<img src="./img/header.png" />
		<div class="mui-media-body">小M<p>发表于 2016-06-30 15:30</p></div>
	</div>
	<!--内容区-->
	<div class="body mui-card-content">这是一个内容区这是一个内容区这是一个内容区这是一个内容区这是一个内容区</div>
	<!--页脚，放置补充信息或支持的操作-->
	<div class="mui-card-footer">这是一个页脚</div>
</div>

---

checkbox（复选框）

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可

<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox" checked disabled>
</div>

---

dialog（对话框）

<!-- .alert( message, title, btnValue, callback [, type] ) 
	message  Type: String   提示对话框上显示的内容
	title    Type: String   提示对话框上显示的标题
	btnValue Type: String   提示对话框上按钮显示的内容
	callback Type: Function 提示对话框上关闭后的回调函数
	type     Value: 'div'    是否使用h5绘制的对话框
	1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式
	-->
	<button onclick="mui.alert('这是弹窗内容','这是弹窗标题','确定',function(){
		console.log('点击完成了');
	},'div')">点击出现弹窗</button>

<!-- .confirm( message, title, btnValue, callback [, type] )
message  Type: String   提示对话框上显示的内容
title    Type: String   提示对话框上显示的标题
btnValue Type: String   提示对话框上按钮显示的内容
callback Type: Function 提示对话框上关闭后的回调函数
type     Value: 'div'    是否使用h5绘制的对话框
1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式
-->
<button onclick="mui.confirm('提示对话框上显示的内容','提示对话框上显示的标题',['取消','确定'],function(){
	console.log('点击完成了');
},'div')">点击出现弹窗</button>

<!-- .prompt( message, placeholder, title, btnValue, callback[, type] )
message        Type: String   提示对话框上显示的内容
placeholder    Type: String   编辑框显示的提示文字
title          Type: String  提示对话框上显示的标题
btnValue       Type: String   提示对话框上按钮显示的内容
callback       Type: Function 提示对话框上关闭后的回调函数
type     Value: 'div'    是否使用h5绘制的对话框
1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式
-->
<button onclick="mui.prompt('提示对话框上显示的内容','编辑框显示的提示文字','提示对话框上显示的标题',['取消','确认'],function (e) {
console.log('点击完成了');
},'div')">点击出现弹窗</button>