Extjs消息提示框——仿造Ext.example.msg

最新推荐文章于 2024-01-06 23:30:00 发布

qdufengwei

最新推荐文章于 2024-01-06 23:30:00 发布

阅读量3.8k

点赞数

分类专栏： Ext

Ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章出处：http://hi.baidu.com/w1985g/item/bbd73d331a1521179dc65e60

<!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);//默认5秒后自动隐藏
 * MsgTip.msg('消息标题', '消息内容',true,10);//10秒后自动隐藏
 */
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;" οnclick="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=5;
             }
             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('消息', '使用默认值5秒自动隐藏',true);
  }
 });
 
 var btn3=new Ext.Button({
  text:'设置自动隐藏时间',
  width:80,
  renderTo:Ext.getBody(),
  handler:function(){
    MsgTip.msg('消息', '设置10秒后自动隐藏',true,10);
  }
 });
});   
</script>
 </head>

 <body>
 </body>
</html>

效果图：

qdufengwei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Extjs消息提示框——仿造Ext.example.msg

文章出处：http://hi.baidu.com/w1985g/item/bbd73d331a1521179dc65e60 test.html body { font-family: helvetica, tahoma, verdana, sans-serif; padding: 20px; padding-top: 32px; fo
复制链接

扫一扫