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

简介:
先看看实现界面吧。
 
在这个界面中,有四个浮动窗口,两个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>



本文转自foresun  51CTO博客,原文链接:http://blog.51cto.com/foresun/196031,如需转载请自行联系原作者
相关文章
|
1天前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
7月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
29 0
|
6月前
|
前端开发
css滚动到顶部自动固定
css滚动到顶部自动固定
共用浮动层提示框(弹框)
共用浮动层提示框(弹框)
|
12月前
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
176 0
|
JavaScript
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
337 0
|
安全 Java 数据库
页面控制菜单的显示或隐藏|学习笔记
快速学习页面控制菜单的显示或隐藏
113 0
页面控制菜单的显示或隐藏|学习笔记
|
前端开发 JavaScript
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。
311 0
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部