FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 3962|回复: 4
打印 上一主题 下一主题

页面右下角TIPS提醒

[复制链接]
跳转到指定楼层
楼主
发表于 2012-4-23 14:14:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
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条待办');")

复制代码

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




以上内容转自,ExtAspNet 经验分享区,由碎心逝夢原创,我引用过来是想咨询下大家,为什么我照他的方法做,提示Microsoft JScript 运行时错误: “Ext”未定义
Microsoft JScript 运行时错误: “showmsg”未定义

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




沙发
发表于 2012-4-26 14:32:35 | 只看该作者
引用的这个脚本放的页面在下面body上面form下面
地板
发表于 2014-12-19 20:39:15 | 只看该作者
<extageManager    现在好像是<f:
5#
发表于 2014-12-26 15:11:01 | 只看该作者
弹出提示时,IE窗口未能获取焦点,可以做到当前IE窗口获取焦点提示就更好。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-25 10:45 , Processed in 0.048778 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表