Extjs之自动消失提示框（Ext.example.msg）

来源：互联网发布：中美合作规范网络编辑：程序博客网时间：2024/05/01 20:48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <title>test.html</title>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />  <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  <script type="text/javascript" src="extjs/ext-all-debug.js"></script>  <style>body { font-family: helvetica, tahoma, verdana, sans-serif; padding: 20px; padding-top: 32px; font-size: 13px; background-color: #fff !important;}</style>  <script type="text/javascript">/** * Extjs消息提示框 * MsgTip.msg('消息标题', '消息内容');//不自动隐藏 * MsgTip.msg('消息标题', '消息内容',true);//默认1秒后自动隐藏 * MsgTip.msg('消息标题', '消息内容',true,10);//3秒后自动隐藏 */MsgTip = function(){    var msgCt;    function createBox(t, s){        return ['<div class="msg">',                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size=12px;"><h3>', t, '</h3>', s, '</div></div></div>',                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',                '</div>'].join('');    }    return {        msg : function(title, message,autoHide,pauseTime){            if(!msgCt){                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div22',style:'position:absolute;top:10px;width:300px;margin:0 auto;z-index:20000;'}, true);            }            msgCt.alignTo(document, 't-t');            //给消息框右下角增加一个关闭按钮            message+='<br><span style="text-align:right;font-size:12px; width:100%;">' +              '<font color="blank"><u style="cursor:hand;" onclick="MsgTip.hide(this);">关闭</u></font></span>'            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, message)}, true);            m.slideIn('t');            if(!Ext.isEmpty(autoHide)&&autoHide==true){             if(Ext.isEmpty(pauseTime)){              pauseTime=1000;             }             m.pause(pauseTime).ghost("tr", {remove:true});            }        },        hide:function(v){         var msg=Ext.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);         msg.ghost("tr", {remove:true});        }    };}();Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; Ext.QuickTips.init();  var btn=new Ext.Button({  text:'不自动隐藏',  width:80,  renderTo:Ext.getBody(),  handler:function(){    MsgTip.msg('消息', '消息内容');  } });  var btn2=new Ext.Button({  text:'自动隐藏',  width:80,  renderTo:Ext.getBody(),  handler:function(){    MsgTip.msg('消息', '使用默认值1秒自动隐藏',true);  } });  var btn3=new Ext.Button({  text:'设置自动隐藏时间',  width:80,  renderTo:Ext.getBody(),  handler:function(){    MsgTip.msg('消息', '设置3秒后自动隐藏',true,3000);  } });});   </script> </head> <body> </body></html>

Ext.AutoHide = function(){      var msgCt;      function createBox(t, s){          return ['<div class="msg">',                  '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',                  '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size=12px;"><h3>', t, '</h3>', s, '</div></div></div>',                  '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',                  '</div>'].join('');      }      return {          msg : function(title, format){            if(!msgCt){                  msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div22',style:'position:absolute;top:10px;width:300px;margin:0 auto;z-index:20000;'}, true);              }              msgCt.alignTo(document, 't-t');            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);            m.slideIn('t').pause(1).ghost("t", {remove:true});        },        hide:function(v)        {              var msg = Ext.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);              msg.ghost("tr", {remove:true});          }      };  }();

0 0