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

最新推荐文章于 2021-10-22 14:38:37 发布
最新推荐文章于 2021-10-22 14:38:37 发布
阅读量1w 收藏 2
点赞数
文章标签： EXTJS javaScript 
<!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;" ο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=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});  
        }  
    };  
}();


sjf0115
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs弹出框 n秒后消失
07-15
extjs弹出框 n秒后消失 信息可以自定义 时间可以自己定 extjs弹出框 n秒后消失 信息可以自定义 时间可以自己定
Ext.example.msg()应用
weixin_33720078的博客
12-08 109
①需要在开发包中包含文件夹example/shared中的example.js和example.css两个文件即可。 ②在html文件中引入： <script src="../extjs-4.2.0/examples/shared/examples.js" type="text/javascript"></script> <link href="...
Extjs之自动消失提示框（Ext example msg）
sdfsdfytre的博客
11-17 500
Extjs之自动消失提示框（Ext example msg）
Extjs之自动消失提示框封装（Ext.example.msg）
11-07 2656
直接 * MsgTip.msg(‘消息标题’, ‘消息内容’);//不自动隐藏 * MsgTip.msg(‘消息标题’, ‘消息内容’,true);//默认1秒后自动隐藏 * MsgTip.msg(‘消息标题’, ‘消息内容’,true,10);//3秒后自动隐藏 这三种方法调用：示例如下:代码如下: /** * Extjs消息提示框 * MsgTip.msg('消息标题',
封装一个Ext消息提示框，显示几秒后自动消失
11-24
封装一个Ext消息提示框，显示几秒后自动消失
3------通过实例学习------Ext.js------.docx
最新发布
11-26
当我们需要在页面中使用Ext.js时，例如创建弹窗提示，会用到`Ext.Msg.show`方法。下面的代码展示了如何创建一个带有输入框的提示框，并在用户点击OK后将输入的内容显示到指定的`div`中： ```html <!DOCTYPE html> ...
Extjs学习笔记
12-16
Ext.MessageBox 是 ExtJS 中的一个功能强大且灵活的提示框组件，提供了多种类型的提示框，包括警告框、确认框、提示框等。下面我们将详细讲解 Ext.MessageBox 的使用方法。 3.1 alert 方法 Ext.MessageBox.alert ...
Ext_MessageBox
09-28
`Ext.MessageBox`是ExtJS框架中用于显示模态对话框的一个非常实用的功能组件，它可以用来展示提示信息、请求用户输入、确认操作等。下面将详细介绍`Ext.MessageBox`的各种功能和用法。 ### 一、`Ext.MessageBox....
ExtJS 3.2的中文参考手册
04-21
例如：`Ext.MessageBox.show({ title: '提示', msg: '这是一个消息框', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.INFO });`。 - **表格 (Grid)**: 是ExtJS中最常用的数据展示组件之一，可以轻松地实现...
Extjs4.2_加强examples.js 自动隐藏消息框
09-08
适用于Extjs4.2版本，不适用3.2版本请注意！ //示例： //不自动消失 有个关闭小按钮可以关闭 Ext.example.msg('Done', 'Your fake data was saved!'); //自动消失 3s 后 Ext.example.msg('Done', 'Your fake data was saved!',true,3000); //说明 Ext.example.msg(标题，内容，是否自动消失，时间);
Ext消息提示框，显示几秒后自动消失
09-23 814
封装一个Ext消息提示框，显示几秒后自动消失 分类： Ext 2009-12-23 22:11 2842人阅读 评论(4) 收藏 举报 最近项目需要，封装了一个Ext消息提示框，提示信息显示几秒后就自动消失。   css代码：   view plaincopy to clipboardprint? .msg .x-box-mc {   font-siz...
EXT messagebox 的使用
Fbote
12-24 226
本文为转载，只为个人备忘 1.Ext.MessageBox.alert()方法 有四个参数：alert( title , msg , function(){} ，this) 其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发,可以传入点击的按钮的id，第四个参数scope:指回调函数作用域。 Ext.Msg.alert("Notice","he...
Extjs消息提示框——仿造Ext.example.msg
04-26 3839
文章出处：http://hi.baidu.com/w1985g/item/bbd73d331a1521179dc65e60 test.html body { font-family: helvetica, tahoma, verdana, sans-serif; padding: 20px; padding-top: 32px; fo
ExtJS学习------Ext.Msg.show()学习
沙漠之鱼
01-25 9831
Ext.Msg.show()函数功能强大，参数多，以下我将介绍各参数功能：       Ext.Msg.show({             buttons:弹出框按钮设置，有如下选项：Ext.Msg.OK(只显示OK按钮），Ext.Msg.OKCANCEL(显示OK和Cancel按钮），Ext.Msg.CANCEL（只显示Cancel按钮），Ext.Msg.YESNO（显示Yes和No按钮）
ext example msg显示位置控制
09-02 644
在EXT的示例中有一些地方用到了消息提示，这种功能可以被用在很多场合，比如数据加载完了给用户一个提示，或者做某件事的时候给予提示，效果很好，但是ext示例中的这个消息提示有一个小小的问题，第一次提示的时候是在比较左侧的位置，而后面的提示均在中间位置。 解决这个小缺点的方法其实很简单，找到example.css中 #msg-div {     position:absolute;     left:...
EXTJS6.2 使用弹出确认框窗口Ext.Msg.show
超级菜鸟
08-04 5514
使用方式Ext.Msg.show({ title:'删除', message: '您确定要删除本行数据么？', buttons: Ext.Msg.OKCANCEL, buttonText: {ok:'确认',cancel:'取消'}, fn: function(btn) { if (btn === 'ok') {
Extjs弹窗-简单文本编辑框-Ext.Msg.show
qq_15508731的博客
10-22 374
var datavalue=''; Ext.Msg.show({ title:'标题', msg:'说明', width:600, height:500, prompt:true, multiline:200, closable:true, modal:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值