FineUI 官方论坛
标题:
如何在弹出的右下角提示框中使用images控件来显示图片?
[打印本页]
作者:
7107135
时间:
2012-9-17 00:31
标题:
如何在弹出的右下角提示框中使用images控件来显示图片?
如何在弹出的右下角提示框中使用images控件来显示图片?
Ext.ns('MyLib');
; (function ($) {
//新建window组,避免被其它window影响显示在最前的效果
var tipsGroupMgr = new Ext.WindowGroup();
tipsGroupMgr.zseed = 99999; //将小贴士窗口前置
$.TipsWindow = Ext.extend(Ext.Window, {
width: 200,
height: 150,
layout: 'fit',
modal: false,
plain: true,
shadow: false, //去除阴影
draggable: false, //默认不可拖拽
resizable: false,
closable: true,
closeAction: 'hide', //默认关闭为隐藏
autoHide: 3, //n秒后自动隐藏,为false时,不自动隐藏
manager: tipsGroupMgr, //设置window所属的组
constructor: function (conf) {
$.TipsWindow.superclass.constructor.call(this, conf);
this.initPosition(true);
},
initEvents: function () {
$.TipsWindow.superclass.initEvents.call(this);
//自动隐藏
if (false !== this.autoHide) {
var task = new Ext.util.DelayedTask(this.hide, this), second = (parseInt(this.autoHide) || 3) * 1000;
this.on('beforeshow', function (self) {
task.delay(second);
});
}
this.on('beforeshow', this.showTips);
this.on('beforehide', this.hideTips);
Ext.EventManager.onWindowResize(this.initPosition, this); //window大小改变时,重新设置坐标
Ext.EventManager.on(window, 'scroll', this.initPosition, this); //window移动滚动条时,重新设置坐标
},
//参数: flag - true时强制更新位置
initPosition: function (flag) {
if (true !== flag && this.hidden) { //不可见时,不调整坐标
return false;
}
var doc = document, bd = (doc.body || doc.documentElement);
//ext取可视范围宽高(与上面方法取的值相同), 加上滚动坐标
var left = bd.scrollLeft + Ext.lib.Dom.getViewWidth() - 4 - this.width;
var top = bd.scrollTop + Ext.lib.Dom.getViewHeight() - 4 - this.height;
this.setPosition(left, top);
},
showTips: function () {
var self = this;
if (!self.hidden) { return false; }
self.initPosition(true); //初始化坐标
self.el.slideIn('b', {
callback: function () {
//显示完成后,手动触发show事件,并将hidden属性设置false,否则将不能触发hide事件
self.fireEvent('show', self);
self.hidden = false;
}
});
return false; //不执行默认的show
},
hideTips: function () {
var self = this;
if (self.hidden) { return false; }
self.el.slideOut('b', {
callback: function () {
//渐隐动作执行完成时,手动触发hide事件,并将hidden属性设置true
self.fireEvent('hide', self);
self.hidden = true;
}
});
return false; //不执行默认的hide
}
});
})(MyLib);
function showmsg(title, content) {
var tipw = new MyLib.TipsWindow({
title: title,
autoHide: 10, //5秒自动关闭
html: content
});
tipw.show();
}
复制代码
效果:
[attach]1088[/attach]
[attach]1089[/attach]
作者:
吉吉﹑
时间:
2012-9-17 01:24
content里面用<img>不行吗?
作者:
7107135
时间:
2012-9-17 02:08
吉吉﹑ 发表于 2012-9-17 01:24
content里面用不行吗?
谢谢,可以的。我就用这个img,开始是我自己写错了,现在OK了。
作者:
张波
时间:
2012-10-12 12:06
能否给个实例代码,我引用你的方法后,怎么老是js报错。
zhangbosun@126.com
,谢谢!
作者:
7107135
时间:
2012-10-14 17:01
本帖最后由 7107135 于 2012-10-14 17:02 编辑
张波 发表于 2012-10-12 12:06
能否给个实例代码,我引用你的方法后,怎么老是js报错。,谢谢!
代码就是上面那个,引用的时候JS文件一定要放在</from>之后,需要调用的时候用这个
PageContext.RegisterStartupScript("showmsg('提示','XXXXXXXXXXXXXXXXXX');");
欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)
Powered by Discuz! X3.4