如何在页面上动态实现浮动窗口？

先看看实现界面吧。

 

在这个界面中，有四个浮动窗口，两个QQ在线服务浮动窗口，这两个浮动窗口是相对静态的，当然即使是静态的，窗口个数和窗口显示的内容也是动态的在线读取的；还有两个窗口是飘浮移动的，这样往往被用作广告，其中的内容、布局、关联方式都应该是动态的，当然其个数也是动态的。

 

那么本界面就关联着以下的业务需求，即：

1. 通过相对静态的浮动窗口来实现诸如QQ在线、MSN在线、Skype在线、商务通在线、Web在线电话在线等的功能，那么就需要同时对上述的在线服务提供统一支持。
2. 通过漂浮移动窗口来实现网站广告，要求能够支持如上图的所示的图形广告、文字广告、图形文字混编广告等，并且可以实现单列多列的定义，以及移动方向的定义。
3. 从理论上，相对静态的浮动窗口和漂浮的移动窗口的个数是无限的自定义的。

应该说，如果静态实现某个网站的相关业务需求，比较简单，但是要支持对上述的通用业务实现，就需要好好设计和规划一下。

 

想看看我们在基础页面中的实现代码吧：

CommonHelper.bsaFloatAdPanel[] listAdPanel =
        {
            new CommonHelper.bsaFloatAdPanel(50, 60, "divAds"),
            new CommonHelper.bsaFloatAdPanel(600, 500, "divAd02", false, false)
        };

CommonHelper.bsaFloatPanel[] listPanel =
            {
                new CommonHelper.bsaFloatPanel(10, 220, false, 10, "Left", "bsaQQMenu"),
                new CommonHelper.bsaFloatPanel(10, 220, true, 10, "Right", "bsaMsnMenu"),
            };

protected override void OnLoad(EventArgs e)
        {
            if (CommonHelper.AdFloatPanelAlwaysShow)
            {
                CommonHelper.FillFloatAdPanel(bsaAd01, CommonHelper.bsaAdShowPageType.All);
                 CommonHelper.FillFloatAdPanel(bsaAd02, CommonHelper.bsaAdShowPageType.All);
            }

            if (CommonHelper.QQServicePanelAlwaysShow)
            {
                CommonHelper.FillQQServicePanel(bsaQqs, CommonHelper.bsaAdShowPageType.All);
                CommonHelper.FillQQServicePanel(bsaMsns, CommonHelper.bsaAdShowPageType.All);
            }

            CommonHelper.RegisterFloatPanelScriptBlock(Page, listPanel);
            CommonHelper.RegisterAdPanelScriptBlock(Page, listAdPanel);

            base.OnLoad(e);
        }

 

这里面我们定义了两个移动窗口参数类，当然类被放在统一处理类CommonHeper中，分别是bsaFloatPanel和bsaFloatAdPanel，前者就是相对静态的窗口参数，后者是移动广告窗体参数类。相对静态的窗口参数一般包括窗体定位的位置，是否靠右，关联的控件等；漂浮窗体包括起始位置、起始方向等。

 

前面说过，浮动窗体的个数是动态的可自定义的，那么在此就应该以数组或者列表的形式传入到实际的窗口业务处理类中。是的，定义的窗体参数被Page.Load事件所调用。

 

这段代码分为两部分：

1. 窗体内容实现：就是FillQQServicePanel和FillFloatAdPanel来实现的内容，这里我们用的静态支持，事实上稍作优化，就可以实现动态内容填充实现，根据窗体参数的不同从数据库中提取必要的内容并且显示在不同的窗体中。这个地方要完成窗体内容填充、窗体控件布局，就保证了窗体有可显示的内容了。
2. 窗体事件实现：这个主要由RegisterFloatPanelScriptBlock和RegisterAdPanelScriptBlock来实现，这是一个技术含量稍微高一些的实现。这里要实现不同窗体内事件的捕捉和处理，并且需要考虑到很好的业务独立性和集成性。所谓独立性，就是不同业务窗体发生的时间应该交由各自窗体进行处理，相互业务独立；所谓集成性，就是要将所有这些业务的实现要集成到一个统一的调用接口中。

事实上，我们对相对静态的浮动窗口统一处理接口定义为BsaInitFloatPanels()，漂浮移动的窗口其统一处理接口为BsaInitAdPanels()，您只需要在您的aspx页面文件中进行调用即可，如下所示：

<script language="javascript" type="text/javascript">
        BsaInitAdPanels();
        BsaInitFloatPanels();
</script>