中對話框

語法：mui.confirm

用法

mui.confirm("確認要切換角色？", "提示", btnArray, function(e) {if(e.index == 1) {} else {}}); 組件名作用

alert	警告框
confirm	確認框
prompt	輸入對話框
toast	消息提示框（自動消失）

彈出菜單（底部）

<div id="popover" class="mui-popover"><ul class="mui-table-view"><li class="mui-table-view-cell"><a href="#">Item1</a></li><li class="mui-table-view-cell"><a href="#">Item2</a></li><li class="mui-table-view-cell"><a href="#">Item3</a></li><li class="mui-table-view-cell"><a href="#">Item4</a></li><li class="mui-table-view-cell"><a href="#">Item5</a></li></ul> </div>

隱藏popover

語法：mui(’.bottomPopover’).popover(status[,anchor]);

用法

mui('.bottomPopover').popover(status[,anchor]);

• status：
  • show：顯示popover
  • hide：隱藏popover
  • toggle：自動識別處理顯示隱藏狀態
• 當傳入toggle時 mui會自動識別 要添加第二參數（anchorElement 錨點元素）

  mui(’.mui-popover’).popover(‘toggle’,document.getElementById(“openPopover”));

設置按鈕的loading狀態

用法

mui(btnElem).button('loading');//切換為loading狀態 mui(btnElem).button('reset');//切換為reset狀態(即重置為原始的button)

示例

<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">確認</button> <script type="text/javascript"> mui(document.body).on('tap', '.mui-btn', function(e) {mui(this).button('loading');setTimeout(function() {mui(this).button('reset');}.bind(this), 2000); }); </script>

圖片輪播

<div class="mui-slider"><div class="mui-slider-group mui-slider-loop"><!--支持循環，需要重復圖片節點--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div><!--支持循環，需要重復圖片節點--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div></div> </div>

JS Method
mui框架內置了圖片輪播插件，通過該插件封裝的JS API，用戶可以設定是否自動輪播及輪播周期，如下為代碼示例：

//獲得slider插件對象 var gallery = mui('.mui-slider'); gallery.slider({interval:5000//自動輪播周期，若為0則不自動播放，默認為0； });

因此若希望圖片輪播不要自動播放，而是用戶手動滑動才切換，只需要通過如上方法，將interval參數設為0即可。
若要跳轉到第x張圖片，則可以使用圖片輪播插件的gotoItem方法，例如：

//獲得slider插件對象 var gallery = mui('.mui-slider'); gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；

注意：mui框架會默認初始化當前頁面的圖片輪播組件；若輪播組件內容為js動態生成時（比如通過ajax動態獲取的營銷信息），則需要在動態生成完整DOM (包含mui-slider下所有DOM結構) 后，手動調用圖片輪播的初始化方法；代碼如下：

//獲得slider插件對象 var gallery = mui('.mui-slider'); gallery.slider({interval:5000//自動輪播周期，若為0則不自動播放，默認為0； });

grid（柵格）

用法

MUI 提供了非常簡單實用的12列響應式柵格系統。使用時只需在外圍容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可

總結

以上是生活随笔為你收集整理的Mui常用的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。