extaspnet 实现右下角小贴士

说是extaspnet实现右下角弹消息框，其实就是纯extjs,baidu搜索一大堆代码

咱只是搬过来直接用，谈不上原创

 

废话少说，上代码，在页面前端加入这段JS代码

 

    <script type="text/javascript">               
    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:5, //5秒自动关闭 
                                            html:content
                                            }); 
            tipw.show();
        }
                   
    </script>

 

调用代码，后台C#

 

protected void Button1_Click(object sender, EventArgs e) { ExtAspNet.PageContext.RegisterStartupScript("showmsg('提示','黄艺博和<b>林妙可</b>的故事!<br />...');"); }

 

效果图:

 

这个是弹在最上方的window,不受框架影响，5秒后消失，好了，收工