MUI 窗體切換(setting設置)即窗口從右往左切換，返回從左往右切換。

1）引入mui.min.css

2）引入mui.min.js 

　  引入mui.view.js

1.HTML:

//這是頁面的主體結構
　　<div id="app" class="mui-views">
 　　　    <div class="mui-view">
   　　　　　　<div class="mui-navbar"></div>
  　　　　　　 <div class="mui-pages"></div>
  　　　　</div>
 　　</div>      
          //這是主頁面
<div id="這是主頁面的ID" class="mui-page">
　　<div class="mui-navbar-inner mui-bar mui-bar-nav">
　　　　<button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
 　　　　　　　　<span class="mui-icon mui-icon-left-nav"></span>返回                //此處是返回按鈕
 　　　　</button>
　　　　 <p class="">這里是頂部導航欄的title</p>
　　　　　　//如果想在右上角也添加一個按鈕的話，可以在此處也添加一個標簽，然后絕對定位就行了。例如：<a href="#user_change_ifo" class="mycenter_nav_bianji">編輯</a>  這a標簽里的href就用#ID的形式來實現頁面跳轉
 　　</div>
　　　　<div class="mui-page-content">
 　　　　　　<div class="mui-scroll-wrapper">
　　　　　　　　<div class="mui-scroll">
　　　　　　　　　　　主頁面的內容
 　　　　　　　　</div>
 　　　　　　</div>
 　　　　</div>
 　　</div>
  　　　　//這是單一頁面
 　　<div id="這是單一頁面的ID" class="mui-page">
 　　　　<div class="mui-navbar-inner mui-bar mui-bar-nav">
 　　　　　　<button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
 　　　　　　　　<span class="mui-icon mui-icon-left-nav"></span>返回                       //此處是返回按鈕
 　　　　　　</button>
 　　　　　　<p class="">這里是頂部導航欄的title</p>
 　　　　　　//如果想在右上角也添加一個按鈕的話，可以在此處也添加一個標簽，然后絕對定位就行了。例如：<a href="#user_change_ifo" class="mycenter_nav_bianji">編輯</a>  這a標簽里的href就用#ID的形式來實現頁面跳轉
 　　　　</div>
 　　　　<div class="mui-page-content">
 　　　　　　<div class="mui-scroll-wrapper">
 　　　　　　　　<div class="mui-scroll">
 　　　　　　　　　　　主頁面的內容
 　　　　　　　　</div>
 　　　　　　</div>
 　　　　</div>
 　　</div>

2.CSS

　　.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {
  　　　　position: absolute;
  　　　　left: 0;
  　　　　right: 0;
  　　　　top: 0;
  　　　　bottom: 0;
  　　　　width: 100%;
  　　　　height: 100%;
 　　　　background-color: #efeff4;
 　　}
 　　.mui-pages {
 　　　　top: 46px;
 　　　　height: auto;
 　　}
 　　.mui-scroll-wrapper,.mui-scroll {               /*好像是為了把單一頁面的內容覆蓋掉*/
 　　　　background-color: #efeff4;
 　　}
 　　.mui-page.mui-transitioning {                            /*頁面切換的特效*/
 　　　　-webkit-transition: -webkit-transform 300ms ease;
 　　　　transition: transform 300ms ease;
 　　}
 　　.mui-navbar .mui-btn-nav {
 　　　　-webkit-transition: none;
 　　　　transition: none;
 　　　　-webkit-transition-duration: .0s;
 　　　　transition-duration: .0s;
 　　}
 　　.mui-navbar-inner.mui-transitioning,
 　　　　.mui-navbar-inner .mui-transitioning {
 　　　　-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
 　　　　transition: opacity 300ms ease, transform 300ms ease;
 　　}
 　　.mui-android .mui-navbar-inner.mui-navbar-left {                 /*頂部導航欄文字的隱藏*/
 
 　　　　opacity: 0;
 　　}
 　　.mui-navbar .mui-btn-nav {                       /*這個可要可不要，是返回按鈕那點的效果*/
 　　　　-webkit-transition: none;
 　　　　transition: none;
 　　　　-webkit-transition-duration: .0s;
 　　　　transition-duration: .0s;
 　　}
 　　.mui-page {
 　　　　display: none;
 　　}
 　　.mui-pages .mui-page {
 　　　　display: block;
 　　}

3.JS

//初始化單頁view
 　　var viewApi = mui('這是頁面的主體結構的ID').view({
  　　　　defaultPage: '這是主頁面的ID'
  　　});
  　 var view = viewApi.view;
 　　(function($) {
 　　　　//處理view的后退與webview后退
 　　　　var oldBack = $.back;
 　　　　$.back = function() {
 　　　　　　if (viewApi.canBack()) { //如果view可以后退，則執行view的后退
 　　　　　　　　viewApi.back();
 　　　　　　} else { //執行webview后退
 　　　　　　　　oldBack();
 　　　　　　}
 　　　　};
 　　//監聽頁面切換事件方案1,通過view元素監聽所有頁面切換事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四種事件(before事件為動畫開始前觸發)
 　　//第一個參數為事件名稱，第二個參數為事件回調，其中e.detail.page為當前頁面的html對象
 　　　　view.addEventListener('pageBeforeShow', function(e) {
 　　　　　　//    console.log(e.detail.page.id + ' beforeShow');
 　　　　});
 　　　　view.addEventListener('pageShow', function(e) {
 　　　　　　//    console.log(e.detail.page.id + ' show');
 　　　　});
 　　　　view.addEventListener('pageBeforeBack', function(e) {
 　　　　　　//    console.log(e.detail.page.id + ' beforeBack');
 　　　　});
 　　　　view.addEventListener('pageBack', function(e) {
 　　　　　　//    console.log(e.detail.page.id + ' back');
 　　　　});
 　　})(mui);