messager(消息窗口)

一、$.messager.alert()类似js中的alert('String')

  方法参数:title, msg, icon, function(回调函数)

  描述:title头部面板标题、msg主要消息内容、icon:消息图标,可用值有(error,question,info,warning)、function回调函数

  

案例1:

    $.messager.alert({
        title:'消息',
        msg:'完成加载...',
        icon:'info',
    });

案例2:$.messager.alert('消息','完成加载...','info');        注意参数的列表顺序,不用加"{}"号!

案例3回调函数:

    $.messager.alert('消息','完成加载...','info',function(){
      alert('退出!!');
      }
    );

二、$.messager.show()类似于QQ的消息提示

  方法参数:showType、 showSpeed、msg、title、

  描述:

    showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。
    showSpeed:定义窗口显示的过度时间。默认:600毫秒。
    width:定义消息窗口的宽度。默认:250px。
    height:定义消息窗口的高度。默认:100px。
    title:在头部面板显示的标题文本。
    msg:显示的消息文本。
    style:定义消息窗体的自定义样式。
    timeout(很少用):如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒。

  

案例:$.messager.show({showType:'slide', showSpeed:'600',msg:'马化腾:Q币充值成功!!!',title:'小提示'});

 

三、$.messager.confirm()显示一个“确定”、“取消”提示窗口!

    参数:title, msg, function(回调函数)

    描述:title:在头部面板显示的标题文本。

       msg:显示的消息文本。
       function(r): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数,否则传递一个false值。

    

案例1:    $.messager.confirm('提示','你要退出系统吗?',function(r){

          if(r){
              '确定'
          }{
              '取消'
          }
       });

四、$.messager.prompt()提示窗口confirm,不同的是可以输入信息!

    参数:title, msg, function(回调函数)

    描述:

      title:在头部面板显示的标题文本。

      msg:显示的消息文本。
      function(val): 在用户输入一个值参数的时候执行的回调函数。 

    

案例:$.messager.prompt('小提示','请输入你的名字',function(r){

    if(r){
      $('#t').val(r);//动态的修改input标签文本内容
    }
   });

五、$.messager.progress() 进度条

    参数:

      title:在头部面板显示的标题文本。默认:空。
      msg:显示的消息文本。默认:空。
      text:在进度条上显示的文本。默认:undefined。
      interval:每次进度更新的间隔时间。默认:300毫秒。

    方法定义为:
      bar:获取进度条对象。
      close:关闭进度窗口。

    

案例:

    $.messager.progress({

        title:'提示',
        msg:'文本',
        text:'努力中...',
        interval:'600'
    
});

  显示进度消息窗口。

	$.messager.progress(); 

  关闭进度消息窗口。

	$.messager.progress('close');
posted @ 2016-04-23 10:31 逍遥叹!! 阅读(...) 评论(...) 编辑 收藏