EXTASPNET这套控件封装了很多常用的控件,但是唯独缺少了类似QQ推送那样的右下角TIPS提醒{:soso_e136:}
恰巧手里的项目需要这个东西,经过百度的不屑努力终于找到了办法,不敢独享,出来给大家分享
注:仅对网上代码做了一下搬运,不喜勿喷
废话不说,直接上代码
建立一个JS文件
- 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: 60, //5秒自动关闭
- html: content
- });
- tipw.show();
- }
复制代码
这里要说一下,因为EXTASPNET封装了EXTJS的库,所以在EXTASPNET控件制作的页面中要使用此JS,比如将此JS的引用放到- <extageManager ID="ageManager1" EnableBigFont="true" AutoSizePanelID="RegionPanel1"
- runat="server"></extageManager>
复制代码
之下,而不是传统的HEAD中,放到HEAD中会引发未定义的异常
如果要弹出TIPS直接在前端调用showmsg()方法即可
补充一个在后台弹出TIPS的代码
- PageContext.RegisterStartupScript("showmsg('提示','XXXX你好,今日你有10条待办');")
复制代码
这个没有多大的技术含量,只希望能帮助到大家,同时也希望大家分享自己的经验
|