Ext消息提示框（转载）

最新推荐文章于 2024-01-06 23:30:00 发布
最新推荐文章于 2024-01-06 23:30:00 发布
阅读量688 收藏
点赞数
分类专栏： 综合文献 文章标签： ext function extjs html image url

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

?
<!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;" 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=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 >

效果图：

乡村崽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs消息提示框
04-30
论坛上找的ExtJs消息提示框，各个方向的都有，十分人性化
封装一个Ext消息提示框，显示几秒后自动消失
11-24
封装 Ext 消息提示框，显示几秒后自动消失 本资源是关于封装一个 Ext 消息提示框，显示几秒后自动消失的知识点集合。该资源主要涵盖了 CSS 和 JavaScript 代码，旨在实现一个可以自动消失的消息提示框。 1. CSS ...
Ext信息提示对话框
weixin_30878361的博客
09-30 122
　　Ext.window.MessageBox是一个工具类，他继承自Ext.window.Windoe对象，用来生成各种风格的信息提示对话框，其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问，使用Ext.MessageBox和使用Ext.Msg有相同的效果，而后者提供了更简短的调用方式。为了描述方便后边我们将使用Ext.MessageBox代表Ext.window....
Ext JS 消息提示框
wangchunbo的博客空间
09-12 865
Ext JS消息框
EXt 提示信息处理
mickey
01-09 162
Ext.onReady(function(){ Ext.get('mb1').on('click', function(e){ //提示信息：确认信息提示 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult); （标题，提示信息，调用function名字） ...
EXT_信息提示框组件_Ext.MessageBox
66
04-11 6902
1.只读信息提示框：Ext.MessageBox.alert()<!--/*注意：Ext.MessageBox是异步的，它的调用不会停止浏览器中代码执行，如希望信息提示出现等待用户反馈后才执行代码，需设置一回调函数调用格式:alert(String title,String msg,[Function fn],[Object scope])*///当DOM树加载
Ext JS 提示消息的 函数
08-03
`Ext.MessageBox.confirm`是Ext JS库中用于显示带有确认按钮的消息框的方法。此方法接受三个参数： - 第一个参数为**对话框标题**（string类型）。 - 第二个参数为**显示的消息内容**（string类型）。 - 第三个参数...
Web项目引入Ext4框架
10-03
这是Web项目引入ExtJS4框架的示例代码，其中移除了一些Ext不需要的文件，保留了日常常用的文件，这样可以避免项目过于臃肿！
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
10-27
这其中一个常见的定制化需求便是去掉Ext Msg提示框的关闭按钮。通过这种方式，我们可以确保用户必须通过点击按钮或者完成其他必要的操作，而不是简单地点击关闭按钮来结束提示框的显示。 在Extjs4框架中，消息框是...
ExtJs 提示信息
星空
09-08 2311
var renderer = function (data, metadata, record, rowIndex, columnIndex, store){ metadata.attr ='ext:qtip=' + data; return data; } Ext.onReady(function () { Ext.QuickTips.init();
Ext常用提示框
晶谛-giserDev
12-15 361
等待框 Ext.onReady(function() { // 等待框 Ext.MessageBox.wait( "提示信息", "hello world", { interval: 400, // 定时循环间隔 duration: 2000, // 总时长 increment: 5, // 执行进度条的次数 text: "更新中",// 提示信息 scope: this, fn: function() { alert("Done!");
ExtJS 的 各种提示框
最新发布
weixin_42307069的博客
01-06 928
ExtJS 的 提示框：alert、confirm、prompt、toast
Extjs消息提示框——仿造Ext.example.msg
04-26 3841
文章出处：http://hi.baidu.com/w1985g/item/bbd73d331a1521179dc65e60 test.html body { font-family: helvetica, tahoma, verdana, sans-serif; padding: 20px; padding-top: 32px; fo
学习Extjs4 (1) 提示框 Ext.MessageBox
12-18 292
今天主要记录一下学习的Ext.MessageBox。 废话少说 直接上代码和效果 预备代码(javascript)： Ext.MessageBox有个简写形式：Ext.Msg 这两种使用效果是一样的。 1 Ext.require(["*"]); 2 3 var DemoFunc = { 4 evtAfterClick: funct...
Extjs之自动消失提示框封装（Ext.example.msg）
11-07 2658
直接 * MsgTip.msg(‘消息标题’, ‘消息内容’);//不自动隐藏 * MsgTip.msg(‘消息标题’, ‘消息内容’,true);//默认1秒后自动隐藏 * MsgTip.msg(‘消息标题’, ‘消息内容’,true,10);//3秒后自动隐藏 这三种方法调用：示例如下:代码如下: /** * Extjs消息提示框 * MsgTip.msg('消息标题',
EXT 鼠标置于GridPanel某一行上显示提示tip消息
JAVA学习积累
01-10 1826
[javascript] view plaincopy listeners: {                          'render': function (grid) {                              var store = grid.getStore();                              v
extjs 添加tip提示框
Ellie
05-27 1199
1、获取组件的id，2、用setAttribute()方法； Ext.getCmp('id').getEl().dom.setAttribute('data-qtip', '测试');//可以把这个方法放在change事件中，或者其他事件，根据需求来调整 ...
Ext.js 消息提示框
05-25
Ext.js 提供了一个方便的消息提示框组件，可以在页面中快速地显示消息提示。使用 Ext.Msg 类来创建消息提示框，具体方法如下： 1. 显示一个简单的提示框： ``` Ext.Msg.alert('提示', '这里是提示信息'); ``` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值