页面右下角TIPS提醒

碎心逝夢

        EXTASPNET这套控件封装了很多常用的控件，但是唯独缺少了类似QQ推送那样的右下角TIPS提醒{:soso_e136:}
        恰巧手里的项目需要这个东西，经过百度的不屑努力终于找到了办法，不敢独享，出来给大家分享
       注：仅对网上代码做了一下搬运，不喜勿喷
        废话不说，直接上代码
       建立一个JS文件
      

1. Ext.ns('MyLib');
   
2. 
   
3. ; (function ($) {
   
4.     //新建window组，避免被其它window影响显示在最前的效果
   
5.     var tipsGroupMgr = new Ext.WindowGroup();
   
6.     tipsGroupMgr.zseed = 99999; //将小贴士窗口前置
   
7. 
   
8.     $.TipsWindow = Ext.extend(Ext.Window, {
   
9.         width: 200,
   
10.         height: 150,
    
11.         layout: 'fit',
    
12.         modal: false,
    
13.         plain: true,
    
14.         shadow: false, //去除阴影
    
15.         draggable: false, //默认不可拖拽
    
16.         resizable: false,
    
17.         closable: true,
    
18.         closeAction: 'hide', //默认关闭为隐藏
    
19.         autoHide: 3, //n秒后自动隐藏，为false时,不自动隐藏
    
20.         manager: tipsGroupMgr, //设置window所属的组
    
21.         constructor: function (conf) {
    
22.             $.TipsWindow.superclass.constructor.call(this, conf);
    
23.             this.initPosition(true);
    
24.         },
    
25.         initEvents: function () {
    
26.             $.TipsWindow.superclass.initEvents.call(this);
    
27.             //自动隐藏
    
28.             if (false !== this.autoHide) {
    
29.                 var task = new Ext.util.DelayedTask(this.hide, this), second = (parseInt(this.autoHide) || 3) * 1000;
    
30.                 this.on('beforeshow', function (self) {
    
31.                     task.delay(second);
    
32.                 });
    
33.             }
    
34.             this.on('beforeshow', this.showTips);
    
35.             this.on('beforehide', this.hideTips);
    
36. 
    
37.             Ext.EventManager.onWindowResize(this.initPosition, this); //window大小改变时，重新设置坐标
    
38.             Ext.EventManager.on(window, 'scroll', this.initPosition, this); //window移动滚动条时，重新设置坐标
    
39.         },
    
40.         //参数: flag - true时强制更新位置
    
41.         initPosition: function (flag) {
    
42.             if (true !== flag && this.hidden) { //不可见时，不调整坐标
    
43.                 return false;
    
44.             }
    
45.             var doc = document, bd = (doc.body || doc.documentElement);
    
46.             //ext取可视范围宽高(与上面方法取的值相同), 加上滚动坐标
    
47.             var left = bd.scrollLeft + Ext.lib.Dom.getViewWidth() - 4 - this.width;
    
48.             var top = bd.scrollTop + Ext.lib.Dom.getViewHeight() - 4 - this.height;
    
49.             this.setPosition(left, top);
    
50.         },
    
51.         showTips: function () {
    
52.             var self = this;
    
53.             if (!self.hidden) { return false; }
    
54. 
    
55.             self.initPosition(true); //初始化坐标
    
56.             self.el.slideIn('b', {
    
57.                 callback: function () {
    
58.                     //显示完成后,手动触发show事件,并将hidden属性设置false,否则将不能触发hide事件
    
59.                     self.fireEvent('show', self);
    
60.                     self.hidden = false;
    
61.                 }
    
62.             });
    
63.             return false; //不执行默认的show
    
64.         },
    
65.         hideTips: function () {
    
66.             var self = this;
    
67.             if (self.hidden) { return false; }
    
68. 
    
69.             self.el.slideOut('b', {
    
70.                 callback: function () {
    
71.                     //渐隐动作执行完成时,手动触发hide事件,并将hidden属性设置true
    
72.                     self.fireEvent('hide', self);
    
73.                     self.hidden = true;
    
74.                 }
    
75.             });
    
76.             return false; //不执行默认的hide
    
77.         }
    
78.     });
    
79. })(MyLib);
    
80. 
    
81. 
    
82. function showmsg(title, content) {
    
83.     var tipw = new MyLib.TipsWindow({
    
84.         title: title,
    
85.         autoHide: 60, //5秒自动关闭  
    
86.         html: content
    
87.     });
    
88.     tipw.show();
    
89. }

复制代码

这里要说一下，因为EXTASPNET封装了EXTJS的库，所以在EXTASPNET控件制作的页面中要使用此JS，比如将此JS的引用放到

1. <ext:PageManager ID="PageManager1" EnableBigFont="true" AutoSizePanelID="RegionPanel1"
   
2.         runat="server"></ext:PageManager>

复制代码

之下，而不是传统的HEAD中，放到HEAD中会引发未定义的异常
如果要弹出TIPS直接在前端调用showmsg（）方法即可


补充一个在后台弹出TIPS的代码

1. PageContext.RegisterStartupScript("showmsg('提示','XXXX你好，今日你有10条待办');")

复制代码

        这个没有多大的技术含量，只希望能帮助到大家，同时也希望大家分享自己的经验

〓飚〓

好东西，感谢分享~~可以正常使用，不过有1个警告：更新 JScript IntelliSense 时出错……MyLib.js: 'Ext' 未定义 @ 0:0
不知道该怎么解决（ExtAspNet 3.1.3）

笑忘书

不错，如果能拖动就更好了

碎心逝夢

笑忘书 发表于 2012-4-19 10:13
不错，如果能拖动就更好了

draggable: false  这个属性是控制拖动的，你只要改这个属性值就可以的

笑忘书

碎心逝夢 发表于 2012-4-19 10:16
draggable: false  这个属性是控制拖动的，你只要改这个属性值就可以的

哦，非常感谢。

西门吹雪

还需要引用什么吗.我试了没效果,用后台调用时出错,页面都打不开了

笑忘书

对了，能增加文字的链接的功能吗

7107135

Microsoft JScript 运行时错误: “Ext”未定义
Microsoft JScript 运行时错误: “showmsg”未定义

我的提示报错了。我建立了一个JS 文件把JS部分复制进去了，然后在前台<extageManager ID="ageManager1" runat="server" />下面引入JS文件，运行报错。

Omit

7107135 发表于 2012-4-23 13:32
Microsoft JScript 运行时错误: “Ext”未定义
Microsoft JScript 运行时错误: “showmsg”未定义

说干脆点，就是放在    </form> 后面～呵呵！

碎心逝夢

〓飚〓 发表于 2012-4-24 20:49
好东西，感谢分享~~可以正常使用，不过有1个警告：更新 JScript IntelliSense 时出错……MyLib.js: 'Ext'  ...

这个是因为你放的位置不正确引起的，最保险的方法，你放到页面的底部</form>后面