页面中的信息提示

 看到网易博客的信息提示(操作时右上角有一些信息提示),就想起我公司用的那个信息提示,是多么的样衰,竟然用最原始的js函数,alert(str)这个东西。。真是太落后了!那不爽怎么着?不爽就改咯,看了网易的信息提示后,就想,弄个像网易的信息提示吧!个人感觉还是OK的,就不知别人感觉如何。。

     代码不难,主要就是浏览器不兼容的问题,我是先把要显示的div和一些js都放在基类里面,在load的时候输出到客户端,下面先贴下具体要在客户端生成的html和js代码吧!

 

#region 页面提示框 by andy 2010-6-8
        /// <summary>
        /// 生成相应的html,js代码
        /// </summary>
        public void PageClewMsg()
        {
            StringBuilder pageBase_clewscript = new StringBuilder();
            pageBase_clewscript.Append(@"
                                <script Language='Javascript'>
                                function pageBase_divcenterShow(i)
                                {
                                    document.getElementById('pageBase_clewDiv').innerHTML=i;
                                     document.getElementById('pageBase_clewDiv').style.display='block'; 
                                     document.getElementById('pageBase_clewDiv').style.filter='Alpha(Opacity=100)';
                                     pageBase_clewDivHide(90);
                                }
                                function pageBase_clewSleep(num)
                                {
                                   var ie = !-[1,]; 
                                      if (ie){   
                                         document.getElementById('pageBase_clewDiv').style.filter='Alpha(Opacity='+num+')';
                                      }
                                      else
                                      {
                                         document.getElementById('pageBase_clewDiv').style.opacity=num/100; 
                                      }
                                      if(num>0)
                                      {
                                         if(num<=10)
                                      {
                                       pageBase_clewDivHide(0);
                                      }
                                      else
                                      {
                                       pageBase_clewDivHide(num-10);
                                      }
                                      }
                                } 
                                function pageBase_clewDivHide(num)
                                {
                                  setTimeout(
                                   function(){
                                    eval(pageBase_clewSleep(num));  
                                   },300
                                   );   
                                }               
                            </script>
");
            string pageBase_clewDiv = @"<div id='pageBase_clewDiv' style='right:5px;top:7px; z-index:999999;font-size: 12px;  background:#FFFF00;display:none;
                                        position: absolute;height:16px; border:1px solid red;text-align:center;padding:5px 6px 0px 6px ;'></div>";
            if (!Page.ClientScript.IsStartupScriptRegistered("runingscript_clew"))
            {
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "pageBase_clewDiv", pageBase_clewDiv.ToString());
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "pageBase_clewscript", pageBase_clewscript.ToString());
            }
        }

 

   确实,在C#里面写html和js代码就不是很好看,这先不管。上面这段代码就是编写向页面输出的代码,再进行注册。

然后再page基类的onLoad事件里面,再调用这个方法,注意在这行代码之后调用base.OnLoad(e);然后再基类里面编写一个方法,供外界调用,这个方法里面主要就是调用上面写的js函数,具体代码如下:

public void ClewMsg(string str)
        {
            if (!Page.ClientScript.IsStartupScriptRegistered("clewscript"))
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "clewscript", "<script>pageBase_divcenterShow('" + str + "');</script>");
        }

 上面的代码再简单不过了!然后只要新建的页面继承了这个页面,就可以使用ClewMsg这个方法了!比如说操作成功,就可以用这个方法来提示相关的信息了!

 

在这里讲一下编写过程中的一些经验!

1.js不支持重载,编写js过程中,因为经常写C#太熟手了!很自然的就用到重载,谁知js不支持,不但不支持,在页面左下角还没有提示错误,经过很久的查找调试才得知原来是不支持重载。

2.浏览器不兼容的问题,在IE和FF下。设置div的透明度代码不一样的,从上面的代码中也可以看出编写js时是经过判断的,由于IE没有遵守css3的规范导致代码要分成两个分支。还有一个需要特别注意的就是在使用IE6,IE7,google浏览器,搜狗浏览器的时候,必须对div 的宽度和高度进行指定,否则的话,设置透明度在这些浏览器下全都是无效的(全是经过一一验证的)。

3.有时会产生多余的数据,在编写功能完成之后,就想到一个问题,如果我的页面不需要使用到基类的这个提示信息的方法,那不多输出了很多html和js代码了,如果以后这样的方法增多,那无疑是对每个页面都增加了大量的数据传送,这可是万万不行呀!后面想了下,就在基类提供了一个属性,供外面设置,要不要使用这个功能,默认是不使用(即不输出这些html和js代码),如果需要则输出。

属性:

        private bool clew;
        /// <summary>
        /// 用于控制是否要使用页面提示框
        /// </summary>
        public bool Clew
        {
            get { return clew; }
            set { clew = value; }
        }

除此之外,还需要修改一下基类Onload事件中的代码

 protected override void OnLoad(EventArgs e)
        {

            base.OnLoad(e);
            if (clew)
                PageClewBehind();
        }

这样就OK了!在OnLoad的时候,确定要不要加载那些html和js,在子页面应当如何使用呢

第一,先设置要不要用这个功能,如果需要在子类的load事件中编写base.Clew=true;记得不管是否回抛,都要让程序执行这句话!(不然在第二次生成的html和js代码,会少了上面那些代码,因为每次运行服务器代码后,客户端的html都是重新生成输出的)

第二,哪里需要这个功能,就在哪里调用咯,比如操作成功后提示之类的!

大概就是这样了!在这里做下笔记,呵呵!

posted on 2010-06-08 21:28  Ss_Andy  阅读(1469)  评论(0编辑  收藏  举报