1、mui.alert() 普通提醒
參數
1、message Type: String 提示對話框上顯示的內容 2、title Type: String 提示對話框上顯示的標題 3、btnValue Type: String 提示對話框上按鈕顯示的內容 4、callback Type: Function 提示對話框上關閉后的回調函數 5、type Value: 'div'是否使用h5繪制的對話框
演示代碼
mui.alert('歡迎使用Hello MUI', 'Hello MUI' ,'我知道了', function() { mui.toast('你剛關閉了警告框'); });
2、mui.confirm() 確定消息框
參數
1、message Type: String 提示對話框上顯示的內容 2、title Type: String提示對話框上顯示的標題 3、btnValue Type: Array 提示對話框上按鈕顯示的內容 4、callback Type: Function 提示對話框上關閉后的回調函數 5、type Value: 'div' 是否使用h5繪制的對話框
演示代碼
mui.confirm('真的要刪除嗎？','Hi...',new Array('否','是'),function(e){ if(e.index == 1){mui.toast('是');}else{mui.toast('否');} });
3、mui.prompt() 輸入框
參數
message Type: String 提示對話框上顯示的內容 placeholder Type: String 編輯框顯示的提示文字 title Type: String 提示對話框上顯示的標題 btnValue Type: Array 提示對話框上按鈕顯示的內容 callback Type: Function提示對話框上關閉后的回調函數 type Value: 'div' 是否使用h5繪制的對話框
演示代碼
mui.prompt('請輸入您的姓名？','Hi...','我是輸入框',new Array('取消','確定'),function(e){ if(e.index == 1){ mui.toast(e.value); }else{ mui.toast('您取消了輸入'); } });
4、mui.toast() 自動消失的消息框
mui.toast('hi...');
5、表單元素
基本說明:
所有包裹在.mui-input-row 類中的 input、textarea等元素都將被默認設置寬度屬性為width: 100%; 。 將 label 元素和上述控件控件包裹在.mui-input-group中可以獲得最好的排列。
<form class="mui-input-group"> <div class="mui-input-row"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" >確認</button> <button type="button" class="mui-btn mui-btn-danger" >取消</button> </div> </form>
輸入增強
mui目前提供的輸入增強包括：快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。
1、快速刪除：只需要在input控件上添加.mui-input-clear類，當input 控件中有內容時，右側會有一個刪除圖標，點擊會清空當前input的內容；
<form class="mui-input-group"> <div class="mui-input-row"> <label>快速刪除</label> <input type="text" class="mui-input-clear" placeholder="請輸入內容"> </div> </form>
2、搜索框：在.mui-input-row同級添加.mui-input-search 類，就可以使用search控件
<form class="mui-input-group"> <div class="mui-input-row mui-search"> <input type="search" class="mui-input-clear" placeholder="搜索點這里"> </div> </form>
3、密碼框：給input元素添加.mui-input-password類即可使用
<form class="mui-input-group"> <div class="mui-input-row"> <label>密碼框</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼"> </div> </form>
初始化
mui在mui.init()中會自動初始化基本控件,但是 動態添加的元素需要重新進行初始化
mui('.mui-input-row input').input();