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

先看看实现界面吧。

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

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

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

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

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

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事件所调用。

这段代码分为两部分：

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

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

本文转自foresun 51CTO博客，原文链接：http://blog.51cto.com/foresun/196031，如需转载请自行联系原作者

如何在页面上动态实现浮动窗口？相关推荐

asp.net panel 加html,ASP.NET 页面中动态增加的控件、添加事件
要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在R ...
[油猴脚本开发指南]脚本往页面上添加新元素
本节主要内容转载自油猴中文网:https://bbs.tampermonkey.net.cn/ 李恒道QQ4548212 油猴中文网https://bbs.tampermonkey.net.cn/ ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
在页面上根据数据，动态创建表格
在页面上根据数据,动态创建表格 var arr = [ { name: 'Jack', age: 18, gender: '男' },{ name: 'Rose', age: 20, gender: ...
html设置excel打开新窗口,怎么在excel的大页面上设置第几页第几页的
excel总是显示很大字"第几页第几页"怎么去掉打开excel表格,可以在页面显示中看到有浅灰色的"第1页"."第3页"字样. 点击页面上 ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
php窗口滚动代码_PHP自动在页面上滚动展示图片的方法
这篇文章主要介绍了PHP实现自动对图片进行滚动显示的方法,涉及php操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了PHP实现自动对图片进行滚动显示的方法.具体如下: 指 ...
HTML语言如何建立浮动窗,HTML基础之框架和浮动窗口
框架概念框架页面可将 Web 浏览器窗口分为不同的可滚动的区域,这些区域可独立显示几个 Web 页.一个窗口可保持不变,而其他窗口根据用户选择的超链接变化. 框架标记 1.设计框架页面时,标记和标 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
android 获得顶层窗口_Android 实现顶层窗口、浮动窗口（附Demo）
做过Window程序开发的朋友应该都知道,我们要把程序窗口置顶很简单,只要设置一些窗口属性即可.但是到了Android,你无法简单设置一个属性,就让Android的Activity置顶.因为只要有新的 ...

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

如何在页面上动态实现浮动窗口？相关推荐

最新文章

热门文章