`
xiaochengfu1
  • 浏览: 35912 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ext弹出框

    博客分类:
  • ext
 
阅读更多
/**
  *信息提示框,显示后迅速消失
*/
Ext.QuickMsg = function() {
var msgCt;
function createBox(t, s, isClose) {
var html = new Array();
html.push('<div id="msg" class="msg" onclick="Ext.QuickMsg.close()">');
html.push('<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">');
html.push('</div></div></div>');
html.push('<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">');
if (t) {
html.push('<h3 class="msg-h3">');
html.push(t);
html.push('</h3>');
}
if (isClose) {
html.push('<span class="msg-close" onclick="Ext.QuickMsg.close()"></span>');
}
html.push(s);
html.push('</div></div></div>');
html.push('<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>');
html.push('</div>');
return html.join('');
}
return {
/** <img src="'+closeImageUrl+'" mce_src="'+closeImageUrl+'"/>
* 显示信息
* title:标题
* msg:提示信息
* time:显示时间,超时后自动消失
* alignEl:对齐到该对象的左下角
* offsets[Array]:横向偏移像素,比如:[200,0]标识右移200个像素
* positon:位置
* animate[boolean]:是否开启动画 
* isClose[boolean]:是否可关闭
*/
show : function(title, msg, width, time, alignEl, offsets, position,
animate, isClose) {
width = width ? width : '250px';
time = time ? time : 2;
alignEl = alignEl ? alignEl : document;
//alert(alignEl.id); 
position = position ? position : 't-t';
animate = animate ? animate : false;
this.close();
if (!msgCt) {
msgCt = Ext.DomHelper.insertFirst(document.body, {
id : 'msg-div'
}, true);
msgCt.setWidth(width);
}
//采用默认动画将div的最中央对齐到alignEl的左下角,并右移200个象素,且不能超出窗口 
msgCt.alignTo(document, position, offsets, animate);
var m = Ext.DomHelper.append(msgCt, {
html : createBox(title, msg, isClose)
}, true);
m.slideIn('t').pause(time).ghost("t", {
remove : true
});//元素从上滑入效果,可不带参数调用下同   
},

//提示信息 
alert : function(msg, field, alignEl, width) {
width = width ? width : '150px';
var html = '<span style="font-size:13px;" mce_style="font-size:13px;">'
+ msg + '</span>';
this.show('', html, '150px', 2, field, [120, 0], 't-t', true, true);
},

close : function() {
var div = document.getElementById('msg-div');
if (div) {
div.style.display = 'none';
}
msgCt = '';
}
};

//调用方法
//var tt="显示的信息";
// Ext.QuickMsg.show('提示', tt ,'450px',3,Ext.getBody(),[10,450],'t-t',true,true); 
}();

css:/*下面信息弹出框样式,主要作用:使信息弹出框显示在最上面*/
    #msg-div {
    position: absolute;
    left: 35%;
    top: 10px;
    width: 250px;
    z-index: 20000;
}
分享到:
评论

相关推荐

    EXT弹出框改装实现

    EXT弹出框改装实现 EXT是一个流行的JavaScript框架,主要用于构建富客户端应用。它提供了一整套组件,包括弹出框(Window),使得开发者能够轻松创建交互式的用户界面。EXT弹出框改装通常涉及到自定义样式、行为...

    extjs弹出框 n秒后消失

    实现EXTJS弹出框在n秒后自动消失,我们可以利用EXTJS的定时器(Ext.util.DelayedTask)和弹出框(Ext.MessageBox)的配置选项。下面我们将详细讨论如何实现这个功能。 首先,EXTJS的弹出框主要通过`Ext.MessageBox....

    uniappDemo(选择日期、评分条、弹出框).zip

    【uniappDemo(选择日期、评分条、弹出框).zip】是一个压缩包,其中包含了一个基于uni-app框架的示例项目,这个项目整合了日期选择器、评分条和弹出框这三个常用的UI组件。uni-app是一个跨端开发框架,它允许开发者...

    各种弹出窗口 ext窗口

    EXT 2.0 MessageBox 和 JavaScript 弹出窗口是两种在 Web 应用程序中常见的用户交互方式。它们允许开发者向用户展示信息、询问问题或获取输入。EXT 是一个流行的 JavaScript 框架,特别是它的 EXT JS 库,用于构建富...

    ExtJS弹出密码输入框的js文件

    4. **错误处理**:如果用户输入不符合要求,例如,密码太短或包含非法字符,弹出框可能会展示错误信息,并允许用户重新输入。 5. **用户体验**:考虑到密码输入的敏感性,修改后的`prompt`方法可能还包含了其他UX...

    封装一个Ext消息提示框,显示几秒后自动消失

    封装 Ext 消息提示框,显示几秒后自动消失 本资源是关于封装一个 Ext 消息提示框,显示几秒后自动消失的知识点集合。该资源主要涵盖了 CSS 和 JavaScript 代码,旨在实现一个可以自动消失的消息提示框。 1. CSS ...

    Ext-JS框架中文文档

    - **日期选择器**: 一个弹出式的日历组件,用于选择日期。 8. **数据与ComboBox** - **数据处理**: ExtJS提供了强大的数据处理能力,包括数据代理、数据读取器等功能。 - **ComboBox**: 下拉列表框组件,常用于...

    Ext.window从右下角弹出/隐藏

    本文将详细探讨如何在ExtJS中实现一个窗口(`Ext.window`)从右下角动态弹出并隐藏的功能,类似于即时通讯软件(如MSN)中的登录提醒。 #### 二、关键技术点 ##### 1. **自定义窗口类** 为了实现上述需求,首先...

    ExtJs消息提示框

    `Ext.ux.window.Notification`是一个特定的扩展,它提供了灵活的、可自定义的弹出通知窗口,可以在屏幕的各个方向展示。这个组件允许开发者创建浮动的、可定位的消息框,可以自动消失,也可以通过用户操作关闭,增加...

    PHP下载类(弹出框下载)

    "PHP下载类(弹出框下载)"正是为了实现这个目的而设计的。它允许用户在点击下载链接后,浏览器会弹出一个新的窗口或标签,用户可以在该窗口中看到下载进度,并可以选择保存文件的位置。 这个类通常包含以下几个...

    ext框架仿win 7的效果

    1. **窗口(Window)组件**:EXT框架中的Window组件可以用来创建弹出式对话框,我们可以设置其背景透明度、阴影效果,以及窗口拖动和最大化/最小化功能,使其更接近Win 7的窗口行为。 2. **工具栏(Toolbar)和菜单...

    extjs各种常用组件归纳总结

    extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等

    基于EXTJS的表单输入判断及ajax提示框效果.rar

    一个使用了EXTJS框架的表单检测判断,及提示效果,当输入类型不符时,会无刷新弹出提示框,在本演示代码的基础上,你可轻松扩展出一个界面漂亮的EXT登录界面,不过觉得ExtJs用了大量的图片来美化界面,貌似会影响...

    Ext Google Map 简易开发框架

    Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式,用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图,管理地图图层,控制图层的可见性,...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    在ExtJS中,表单组件由`Ext.form.Panel`创建,它可以包含各种表单字段,如文本框、选择框、日期选择器等,用于数据输入。表单数据与后端服务的交互通常通过`Ext.form.action.Submit`或`Ext.form.action.Load`进行。 ...

    extjs2.0学习资料

    - `icon`: 弹出框内容前面的图标,取值为 `Ext.MessageBox.INFO`、`Ext.MessageBox.ERROR` 等。 - `width`: 弹出框的宽度,不带单位。 - `prompt`: 设为 true,则弹出框带有输入框。 - `multiline`: 设为 true,...

    仿QQ-MSN弹出即时消息框

    ext模仿QQ-MSN右下角弹出即时消息框 下载直接使用

    lhgdialog DIV弹出窗口框架

    可扩展性强,复用性高:组件提供了基本常用的功能,在此基础上可根据个人需要增加相应功能,只需要增加少量代码即可开发 出各种弹出窗口。而且窗口的内容页和框架也是相互独立的,设计好框架后你只要更改内容页即可...

    Ext GridPanel 中实现加链接操作

    接下来,我们需要实现 `opLink` 函数,该函数将根据传入的 ID 执行相应的操作(例如打开一个新的窗口或弹出框)。 ```javascript function opLink(id) { // 获取对应的记录 var record = store.getById(id); ...

    Ext下解决无弹出窗口的设计办法.docx

    在Ext JS框架中,开发人员经常遇到需要在页面中实现各种交互设计,其中包括弹出窗口的使用。然而,有些情况下,弹出窗口可能并不符合用户的使用习惯或设计美学,因此寻找替代方案变得必要。本文将探讨如何在Ext环境...

Global site tag (gtag.js) - Google Analytics