码迷,mamicode.com
首页 > 其他好文 > 详细

mui消息框(alert,confirm,prompt,toast)的使用

时间:2018-12-01 20:10:26      阅读:701      评论:0      收藏:0      [点我收藏+]

标签:ESS   自定义   加油   UNC   对话   hello   val   inner   class   

mui消息框(alert,confirm,prompt,toast)的使用
  在开发mui的过程中,我们最经常用到的就是消息框,例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望,这些都做好了封装

alert(警告框)
  用法:
    .alert( message, title, btnValue, callback [, type] )

  message

    Type: String

    提示对话框上显示的内容

  title

    Type: String

    提示对话框上显示的标题

  btnValue

    Type: String

    提示对话框上按钮显示的内容

  callback

    Type: String

    提示对话框上关闭后的回调函数

  type

    Value: ‘div’

    是否使用h5绘制的对话框

  示例代码:
    html:

      <button id=‘alertBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
      <div id="info"></div>
    js:

      var info = document.getElementById("info");
      document.getElementById("alertBtn").addEventListener(‘tap‘, function() {
      mui.alert(‘欢迎使用Hello MUI‘, ‘Hello MUI‘, function() {
      info.innerText = ‘你刚关闭了警告框‘;
        });
      });  
confirm(确认框)
  用法:
    .confirm( message, title, btnValue, callback [, type] )

  message

    Type: String

    提示对话框上显示的内容

  title

    Type: String

    提示对话框上显示的标题

  btnValue

    Type: String

    提示对话框上按钮显示的内容

  callback

    Type: String

    提示对话框上关闭后的回调函数

  type

    Value: ‘div’

    是否使用h5绘制的对话框

  示例代码:
    html:

      <button id=‘confirmBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
      <div id="info"></div>
    js:

      var info = document.getElementById("info");
      document.getElementById("confirmBtn").addEventListener(‘tap‘, function() {
      var btnArray = [‘否‘, ‘是‘];
      mui.confirm(‘MUI是个好框架,确认?‘, ‘Hello MUI‘, btnArray, function(e) {
      if (e.index == 1) {
      info.innerText = ‘你刚确认MUI是个好框架‘;
      } else {
      info.innerText = ‘MUI没有得到你的认可,继续加油‘
      }
      })
      });
prompt(对话框)
  用法:
  .prompt( message, placeholder, title, btnValue, callback[, type] )

  message

    Type: String

    提示对话框上显示的内容

  placeholder

    Type: String

    编辑框显示的提示文字

  title

    Type: String

    提示对话框上显示的标题

  btnValue

    Type: String

    提示对话框上按钮显示的内容

  callback

    Type: String

    提示对话框上关闭后的回调函数

  type

    Value: ‘div’

    是否使用h5绘制的对话框

  示例代码:
    html:

      <button id=‘promptBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
      <div id="info"></div>
    js:

      var info = document.getElementById("info");
      document.getElementById("promptBtn").addEventListener(‘tap‘, function(e) {
      e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了
      var btnArray = [‘取消‘, ‘确定‘];
      mui.prompt(‘请输入你对MUI的评语:‘, ‘性能好‘, ‘Hello MUI‘, btnArray, function(e) {
      if (e.index == 1) {
      info.innerText = ‘谢谢你的评语:‘ + e.value;
      } else {
      info.innerText = ‘你点了取消按钮‘;
      }
      })
      });
  
toast(消息提示框)
  用法:
    .toast( message [,options])

  message

    Type: String

    提示对话框上显示的内容

  options

    Type: JSON

    提示消息的参数

  示例代码:
    html:

      <button id=‘toastBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
      <div id="info"></div>
    js:

      var info = document.getElementById("info");
      document.getElementById("toastBtn").addEventListener(‘tap‘, function() {
      mui.toast(‘欢迎体验Hello MUI‘);
      });

  这些提示框的内容你可以自己使用标签代码来布局你想要提示的展现样子,可以自定义样式,具体代码如下:

  我们拿confirm这个方法来举例说明下(其余方法都和这个一样):

  html代码还是之前那个一样。

  js:

    var info = document.getElementById("info");
    document.getElementById("confirmBtn").addEventListener(‘tap‘, function() {
    var btnArray = [‘否‘, ‘是‘];
    var message = ‘<h6>MUI是个好框架,确认?</h6>‘;
    mui.confirm(message, ‘Hello MUI‘, btnArray, function(e) {
    if (e.index == 1) {
    info.innerText = ‘你刚确认MUI是个好框架‘;
    } else {
    info.innerText = ‘MUI没有得到你的认可,继续加油‘
    }
    },‘div‘);
    });

mui消息框(alert,confirm,prompt,toast)的使用

标签:ESS   自定义   加油   UNC   对话   hello   val   inner   class   

原文地址:https://www.cnblogs.com/wdbgqq/p/10050613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!