mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网
DOM结构
关于mui页面的dom，你需要知道如下规则。
固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具
条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之
前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
### 一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：
1 .mui-bar-nav ~ .mui-content {
2 padding-top: 44px;
3 }
4 .mui-bar-footer ~ .mui-content {
5 padding-bottom: 44px;
6 }
7 .mui-bar-tab ~ .mui-content {
8 padding-bottom: 50px;
9 }
你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。
始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
窗口管理
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验
障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui
/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页
面；
hello mui中无等待窗体切换的实现
从mui v0.7.0版本开始，hello mui示例App的窗体切换性能大幅提升，点击一个链接，不显示雪花等待框，立即打开一个“正在加载...”的页面，之后真实内容快速填充“正在加载...”区域；本文详细讲解如何实现这种窗体切换效果。
整体思路：
1、预加载一个模板父页面（template.html）和共用子页面；
2、点击列表链接时，直接显示模板父页面，并动态修改模板父页面的标题；
3、共用子页面通过loadURL方法加载对应目标页面；
步骤分解：
list.html页面中预加载模板父页面和共用子页面，为了提高效率，共用子页面默认加载了主列表中的第一项（accordion.html），代码如下：
//预加载模板父页面
1 var template = $.preload({
2 url:'examples/template.html',
3 id:'demoTemplate',
4 styles:{
5 popGesture:"hide"
6 }
7 });
//预加载共用子页面
1 var subWebview = $.preload({
2 url:'examples/accordion.html',
3 id:'template_sub',
4 styles:{
5 top: '48px',
6 bottom: '0px'
7 }
8 });
点击列表项时，立即显示模板父页面，改变模板父页面标题，共用子页面加载对应的目标页面，代码如下：
1 var title = this.innerText;
2 template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
3 if(subWebview.getURL()==this.href){
4 subWebview.show();
5 }else{
6 subWebview.loadURL(this.href);
7 }
8 template.show('slide-in-right', 150);
共用子页面默认隐藏，等加载新内容完毕后，再显示出来，代码如下：
1 subWebview.addEventListener('loaded', function() {
2 setTimeout(function(){
3 subWebview.show();
4 },50);
5 });
新页面按下返回按钮后，隐藏模板父页面，并在窗体动画结束后，隐藏共用子页面，代码（App.js）如下：
1 getTemplateWebview().hide('auto');
2 setTimeout(function() {
3 document.getElementById("title").className = 'mui-title mui-fadeout';
4 getSubWebview().hide("none");
5 }, 200);
如上方案的优点：
1、模板父页面预加载，点击后立即显示，不用展示雪花等待框，也不会出现白屏现象；
2、共用子页面，有效控制webview数量，避免切页时频繁创建、销毁webview；
页面关闭：勿重复监听backbutton
mui框架自动封装了页面关闭逻
辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过
addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行
逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
手势操作
点击：忘记click
快速响应是mobile
App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延
迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，
统统使用如下代码：
1 element.addEventListener('tap',function(){
2 //点击响应逻辑
3 });