FineUI 官方论坛

标题: 页面右下角TIPS提醒 [打印本页]

作者: 碎心逝夢    时间: 2012-4-18 15:11
标题: 页面右下角TIPS提醒
        EXTASPNET这套控件封装了很多常用的控件,但是唯独缺少了类似QQ推送那样的右下角TIPS提醒{:soso_e136:}
        恰巧手里的项目需要这个东西,经过百度的不屑努力终于找到了办法,不敢独享,出来给大家分享
       注:仅对网上代码做了一下搬运,不喜勿喷
        废话不说,直接上代码
       建立一个JS文件
      
  1. Ext.ns('MyLib');

  2. ; (function ($) {
  3.     //新建window组,避免被其它window影响显示在最前的效果
  4.     var tipsGroupMgr = new Ext.WindowGroup();
  5.     tipsGroupMgr.zseed = 99999; //将小贴士窗口前置

  6.     $.TipsWindow = Ext.extend(Ext.Window, {
  7.         width: 200,
  8.         height: 150,
  9.         layout: 'fit',
  10.         modal: false,
  11.         plain: true,
  12.         shadow: false, //去除阴影
  13.         draggable: false, //默认不可拖拽
  14.         resizable: false,
  15.         closable: true,
  16.         closeAction: 'hide', //默认关闭为隐藏
  17.         autoHide: 3, //n秒后自动隐藏,为false时,不自动隐藏
  18.         manager: tipsGroupMgr, //设置window所属的组
  19.         constructor: function (conf) {
  20.             $.TipsWindow.superclass.constructor.call(this, conf);
  21.             this.initPosition(true);
  22.         },
  23.         initEvents: function () {
  24.             $.TipsWindow.superclass.initEvents.call(this);
  25.             //自动隐藏
  26.             if (false !== this.autoHide) {
  27.                 var task = new Ext.util.DelayedTask(this.hide, this), second = (parseInt(this.autoHide) || 3) * 1000;
  28.                 this.on('beforeshow', function (self) {
  29.                     task.delay(second);
  30.                 });
  31.             }
  32.             this.on('beforeshow', this.showTips);
  33.             this.on('beforehide', this.hideTips);

  34.             Ext.EventManager.onWindowResize(this.initPosition, this); //window大小改变时,重新设置坐标
  35.             Ext.EventManager.on(window, 'scroll', this.initPosition, this); //window移动滚动条时,重新设置坐标
  36.         },
  37.         //参数: flag - true时强制更新位置
  38.         initPosition: function (flag) {
  39.             if (true !== flag && this.hidden) { //不可见时,不调整坐标
  40.                 return false;
  41.             }
  42.             var doc = document, bd = (doc.body || doc.documentElement);
  43.             //ext取可视范围宽高(与上面方法取的值相同), 加上滚动坐标
  44.             var left = bd.scrollLeft + Ext.lib.Dom.getViewWidth() - 4 - this.width;
  45.             var top = bd.scrollTop + Ext.lib.Dom.getViewHeight() - 4 - this.height;
  46.             this.setPosition(left, top);
  47.         },
  48.         showTips: function () {
  49.             var self = this;
  50.             if (!self.hidden) { return false; }

  51.             self.initPosition(true); //初始化坐标
  52.             self.el.slideIn('b', {
  53.                 callback: function () {
  54.                     //显示完成后,手动触发show事件,并将hidden属性设置false,否则将不能触发hide事件
  55.                     self.fireEvent('show', self);
  56.                     self.hidden = false;
  57.                 }
  58.             });
  59.             return false; //不执行默认的show
  60.         },
  61.         hideTips: function () {
  62.             var self = this;
  63.             if (self.hidden) { return false; }

  64.             self.el.slideOut('b', {
  65.                 callback: function () {
  66.                     //渐隐动作执行完成时,手动触发hide事件,并将hidden属性设置true
  67.                     self.fireEvent('hide', self);
  68.                     self.hidden = true;
  69.                 }
  70.             });
  71.             return false; //不执行默认的hide
  72.         }
  73.     });
  74. })(MyLib);


  75. function showmsg(title, content) {
  76.     var tipw = new MyLib.TipsWindow({
  77.         title: title,
  78.         autoHide: 60, //5秒自动关闭  
  79.         html: content
  80.     });
  81.     tipw.show();
  82. }
复制代码
这里要说一下,因为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条待办');")
复制代码
        这个没有多大的技术含量,只希望能帮助到大家,同时也希望大家分享自己的经验

作者: 笑忘书    时间: 2012-4-19 10:13
不错,如果能拖动就更好了
作者: 碎心逝夢    时间: 2012-4-19 10:16
笑忘书 发表于 2012-4-19 10:13
不错,如果能拖动就更好了

draggable: false  这个属性是控制拖动的,你只要改这个属性值就可以的
作者: 笑忘书    时间: 2012-4-19 10:18
碎心逝夢 发表于 2012-4-19 10:16
draggable: false  这个属性是控制拖动的,你只要改这个属性值就可以的

哦,非常感谢。
作者: 西门吹雪    时间: 2012-4-19 17:08
还需要引用什么吗.我试了没效果,用后台调用时出错,页面都打不开了
作者: 笑忘书    时间: 2012-4-19 17:18
对了,能增加文字的链接的功能吗
作者: 7107135    时间: 2012-4-23 13:32
本帖最后由 7107135 于 2012-4-23 13:37 编辑

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

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

作者: Omit    时间: 2012-4-24 16:35
7107135 发表于 2012-4-23 13:32
Microsoft JScript 运行时错误: “Ext”未定义
Microsoft JScript 运行时错误: “showmsg”未定义

说干脆点,就是放在    </form> 后面~呵呵!
作者: 〓飚〓    时间: 2012-4-24 20:49
本帖最后由 〓飚〓 于 2012-4-24 22:59 编辑

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

作者: 碎心逝夢    时间: 2012-4-25 09:10
〓飚〓 发表于 2012-4-24 20:49
好东西,感谢分享~~可以正常使用,不过有1个警告:更新 JScript IntelliSense 时出错……MyLib.js: 'Ext'  ...

这个是因为你放的位置不正确引起的,最保险的方法,你放到页面的底部</form>后面
作者: 〓飚〓    时间: 2012-4-25 09:20
碎心逝夢 发表于 2012-4-25 09:10
这个是因为你放的位置不正确引起的,最保险的方法,你放到页面的底部后面 ...

确实是放在</form>后面:
    ……
    </form>   
    <script src="../js/MyLib.js" type="text/javascript"></script>
</body>
</html>

作者: 7107135    时间: 2012-4-25 16:41
碎心逝夢 发表于 2012-4-25 09:10
这个是因为你放的位置不正确引起的,最保险的方法,你放到页面的底部后面 ...

放入到from后面了,可以正常运行了,但是调试的时候还是报错。

MyLib.js: 'Ext' 未定义
作者: 7107135    时间: 2012-4-25 16:45
〓飚〓 发表于 2012-4-25 09:20
确实是放在后面:
    ……

我和你位置一样,调试的时候一样报错。但可以正常运行。
作者: 西门吹雪    时间: 2012-4-26 11:34
7107135 发表于 2012-4-25 16:45
我和你位置一样,调试的时候一样报错。但可以正常运行。

我的能用,但是怎么不会自动隐藏
作者: 〓飚〓    时间: 2012-4-26 11:37
西门吹雪 发表于 2012-4-26 11:34
我的能用,但是怎么不会自动隐藏

留意一下楼主的代码,最后面设置成了60秒自动隐藏了,把这个改成5,然后测试的时候ctrl+F5刷新一下就正常了
作者: 西门吹雪    时间: 2012-4-26 11:44
〓飚〓 发表于 2012-4-26 11:37
留意一下楼主的代码,最后面设置成了60秒自动隐藏了,把这个改成5,然后测试的时候ctrl+F5刷新一下就正常 ...

谢谢,可以了,不好意思,没有留意到!
作者: 7107135    时间: 2012-4-28 11:47
西门吹雪 发表于 2012-4-26 11:44
谢谢,可以了,不好意思,没有留意到!

西门你用的页面右下角TIPS提醒,js文件报错么?MyLib.js: 'Ext' 未定义,我的报这个错,但是忽略之后可以运行。
作者: 西门吹雪    时间: 2012-4-28 13:20
7107135 发表于 2012-4-28 11:47
西门你用的页面右下角TIPS提醒,js文件报错么?MyLib.js: 'Ext' 未定义,我的报这个错,但是忽略之后可以 ...

没有报错啊
作者: 〓飚〓    时间: 2012-4-28 22:26
7107135 发表于 2012-4-28 11:47
西门你用的页面右下角TIPS提醒,js文件报错么?MyLib.js: 'Ext' 未定义,我的报这个错,但是忽略之后可以 ...

没报错,可以正常运行,只是vs下面有1个警告:MyLib.js: 'Ext' 未定义,看着碍眼~~
作者: 〓飚〓    时间: 2012-4-29 13:06
如果想在TIPS的标题里加下“×秒后自动关闭”的倒数,不知道应该怎么改??
作者: 7107135    时间: 2012-5-11 13:07
[attach]443[/attach][attach]444[/attach][attach]445[/attach]

我是win7系统64位 VS2010  IE8 浏览器,引用这个程序,提示这些错误,忽略后可以正常显示运行,请问是什么原因?

作者: ☆幻~精灵    时间: 2012-5-15 16:45
这个真不错,谢谢分享。我在使用中,就是自动隐藏失效!!
作者: ☆幻~精灵    时间: 2012-5-15 16:54
[attach]484[/attach]多个执行该脚本时,会产生多个对象。如果设置为可拖拽,会产生以上效果!

作者: ☆幻~精灵    时间: 2012-5-15 16:55
7107135 发表于 2012-5-11 13:07
我是win7系统64位 VS2010  IE8 浏览器,引用这个程序,提示这些错误,忽略后可以正常显示运行,请问是什 ...

你这个,应该是Js文件放置位置错误引起的,你可以将引用的Js,放置到form表单之后(</form>之后去引用)。
作者: Vincent    时间: 2012-6-5 13:16
为毛我的没效果,按楼主说得放在了</form>后面了。。。
作者: 游泳的鱼    时间: 2012-6-6 11:47
按照楼主提示注意的方式进行设置,没有见效果,我的环境是WIN7 64,IE9,VS.NET 2008
作者: 魔小涛    时间: 2012-12-14 14:16
123好东西
作者: P.Yang    时间: 2012-12-15 03:27
如果能够自动的适应浏览器的大小就更好了,还有就是同一时刻让它只能显示一个出来,要不然就会出现23楼的情况。
作者: yiyiran    时间: 2012-12-16 03:58
要出现层叠效果可以仿照这个 http://hi.baidu.com/w1985g/item/bbd73d331a1521179dc65e60
作者: 六月寒    时间: 2013-5-19 20:59
正好用到  谢谢
作者: yygy    时间: 2013-5-22 11:53
好东西,多谢
作者: 雷图    时间: 2013-5-24 12:04
好东西,谢谢分享
作者: 会编程的唐伯虎    时间: 2013-5-28 11:19
这个好,以后灰常可能用到,先收藏
作者: asp.net    时间: 2013-5-28 13:37
THX,来使用下
作者: 小叶    时间: 2013-5-29 10:37
LZ想法不错,FineUI不是开源吗,系统可以把这个小功能直接嵌入FineUI方便大家一起使用。
作者: 洋哥哥    时间: 2013-10-13 22:06
好东西,谢谢楼主
作者: erp8@live.cn    时间: 2013-10-16 18:51
正好用到  谢谢
作者: 1170201028a    时间: 2014-2-11 15:58
点32个赞
作者: 火星程序员    时间: 2014-5-23 16:52
不错,我也觉得 FineUI 缺这个,强烈支持!
作者: Hanson    时间: 2014-10-13 15:56
不错,学习一下。页面右下角Tip
作者: Tiger    时间: 2014-10-14 17:55
FineUI本身现在有这个功能了吧,指定一下弹出小窗口的位置就可以了。
作者: Farmer    时间: 2014-11-5 08:12
不错,以后一定用得到
作者: 幻之达    时间: 2014-12-26 15:12
弹出提示时,IE窗口未能获取焦点,可以做到当前IE窗口获取焦点提示就更好。
作者: risfeng    时间: 2015-9-27 18:16
  1.   var left = Ext.getBody().getViewSize().width - 4 - this.width;
  2.             var top = Ext.getBody().getViewSize().height - 4 - this.height;
复制代码

文中的left top要改成以上代码才不报错!
作者: risfeng    时间: 2015-9-27 18:49
自动关闭在v4.2.0无效,怎么解决?
作者: 风飘雪    时间: 2016-10-28 11:34
markmarkmarkmarkmarkmarkmark
作者: leetle    时间: 2016-10-28 14:10
需要4.2版本的提醒找我
作者: deng8877    时间: 2016-11-2 16:57

自动关闭在v4.2.0无效,怎么解决?
作者: deng8877    时间: 2016-11-2 17:05
leetle 发表于 2016-10-28 14:10
需要4.2版本的提醒找我

层主,我需要4.2的。谢谢了
作者: ddlzq    时间: 2017-2-23 14:59
leetle 发表于 2016-10-28 14:10
需要4.2版本的提醒找我

我需要4.2版本的提醒,谢谢楼主




欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4