教你玩转浮动框和动态控件添加

     我们在上网的时候经常会看到一些广告页面随着屏幕的滚动也一起滚动，还有一些在线考试的页面当中，也会看到考试须知随着页面的走动，那么这些功能是怎么实现的呢？

      概要的说，实现这些效果需要CSS样式设计、javascript和asp.net、ado.net这几种知识的综合运用。

      前台界面的显示需要asp.net界面设计和CSS搭配使用。主要涉及到样式设计中的浮动和布局样式设计。这里需要注意的是关于浮动和宽度的调整，在做网站的时候不仅要考虑浏览器的版本类型，还要考虑到客户机的屏幕大小和分辨率。

      前两天做了学校的VB学生后台浏览的界面，在笔记本和服务器上测试没有问题就发布了，可是学生在机房使用的时候，却出现了异常。还好这个只是升级版本，服务器上还保留着旧的版本，即时又改回了原来的版本，险些耽误了学生的正常使用。

      通过这件事情，明白了实地测试的重要性，尤其是做B/S的界面，如果不到客户机上做实地测试，那就等于项目还没有完成。下面分享一下这些功能的简单实现。

      其实这些功能的实现很简单，关键就是细节上的调整，尤其是样式布局中的百分比或者宽度数值的设定，先对需求做一简要说明。

      1、下图是系统的前台界面： 

      左边是一个id为examInfo的div区块儿，里面包含一些其他的元素，主要用于针对考试须知的说明。右边是一个id为table的div区块儿，在table区块中，放置一个标准table控件（不是html中的table控件），该控件的id为tblAutoTable。右边区域的div用于控制显示题库中各题型的样式，table控件用于显示从数据库中动态查询的试题集。

      最上边的蓝色标题是一个h4标题，背景采用圆角框制作技术。标题下面是关于浏览试题的一些操作控件，放到了一个id为questionOperation的div去块儿中。为实现居中显示效果，将这个div区块的元素放到<center>…… </center>区域中，这样就可以实现自动居中对齐了。

      页面尾部是一个id为footer的div区域，同样也采用了居中的效果。

     2、样式设计部分，主要介绍以下页面中间部分的样式设计。

      其实很简单，需要将左边的#footer区块向左浮动，然后将右边的#table区块向右浮动，然后配置一定的宽度百分比即可。

     脱离浮动后，这两个区块就脱离了他们的一级父级元素（form），以他们的父级元素的父级元素，也就是（body）为基准。

      还需要注意将footer区块清除浮动。因为在table后面还有footer区块，为保证脚部区块始终停靠在底部，需要清楚footer区块的浮动，否则它会跟着table的样式在页面中间的某个部分显示。

      因为右边的table要动态从数据库中读取各个章节的不同题型。在学校的VB考试中编程填空题的题干是采用图片的方式显示，且图片的宽度为要求为810px。如果左边的examInfo区块占用的宽度过多，就会将右边的div排挤到下一行。考试说明是随着界面的滚动而滚动的，所以，右边试题显示的部分被挤到下一行后也会跟着滚动，这样一来就导致学生不能正常浏览试题。

      在这块儿的样式设计的时候，刚开始采用的是宽度设定固定值，在服务器和15寸的笔记本上测试的时候，没有问题，但是到其他大小和分辨率的屏幕上布局就会被打乱。鉴于这种情况，后来调整宽度的值使用百分比。

下面是css样式设计代码：

/*考试须知样式*/
#examInfo
{    
    padding:10px 0px 0px 10px;
    float:left;     /*左浮动*/
    width: 15%;     /*宽度使用百分比*/
}

/*考试显示试题的样式*/
 #table
{       
    margin-top:10px;
    float:right;    /*左浮动*/
    width:76%;      /*宽度配合考试须，使用百分比*/
}
    
/*页脚样式*/  
#footer
{
    text-align :center ;
    background-color: #AAA;
    width: 100%;
    border-top:1px solid #D6D7D;
    bottom:2px;
    float:none;    /*清除浮动*/
}  

      3、浮动框的实现。

      上面已经介绍了页面的布局，那么接下来就是将左侧的examInfo区块实现随屏幕滚动。

      这里是采用javascript脚本实现的滚动。 

 <script type="text/javascript">
        $(function () {        
            var $sidebar = $("#examInfo"),  
            $window = $(window),
            offset = $sidebar.offset(),
            topPadding = 15;
            $window.scroll(function () {
                if ($window.scrollTop() > offset.top) {
                    $sidebar.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: 0
                    });
                }
            });
        });
     </script>

如果要针对其他的div区块实现同样的效果，只需要将var $sidebar = $("#examInfo"),中的#examInfo替换掉即可。

     4、数据库的绑定与动态添加控件的实现

      页面中的试题来源于从数据中读取，ado.net的一些知识不作为重点，这里重点看一下怎么动态添加控件。

 //根据课程和章节和题型查找试题
 dtQuestions = questionMgrFactory.QueryByChapter(vbddlCourse.SelectedItem.Text, vbddlType.SelectedItem.Text, vbddlChapter.SelectedItem.Text);

      …………此处添加其他代码 

 case "编程填空题":
                    for (int i = 0; i < dtQuestions.Rows.Count; i++)
                    {
                        //添加标题
                        TableCell dcQuestionIndex = new TableCell();
                        string content = dtQuestions.Rows[i]["questionContent"].ToString().Trim();
                        dcQuestionIndex.Text = (i + 1).ToString().Trim() + "." + content.Substring(9, content.Length - 9);
                        TableRow drQuestionIndex = new TableRow();
                        drQuestionIndex.Controls.Add(dcQuestionIndex);
                        tblAutoTable.Controls.Add(drQuestionIndex);

                        #region 添加试题内容和答案		 
	
                        //试题内容图片
                        Image image = new Image();
                        image.ImageUrl = dtQuestions.Rows[i]["questionContent"].ToString();
                        //试题内容
                        TableCell tableCell = new TableCell();
                        tableCell.Controls.Add(image);
                        //内容放在一行
                        TableRow tableRow = new TableRow();
                        tableRow.Controls.Add(tableCell);

                        //添加一行显示答案路径
                        TableCell tableCellPath = new TableCell();
                        Label m_Label = new Label();
                        string StrPath = dtQuestions.Rows[i]["correctAnswer"].ToString();
                        
                        m_Label.Text = "答案:" + StrPath;
                        tableCellPath.Controls.Add(m_Label);
                        TableRow tableRowPath = new TableRow();
                        tableRowPath.Controls.Add(tableCellPath);


                        //内容答案都添加到表格中
                        tblAutoTable.Controls.Add(tableRow);
                        tblAutoTable.Controls.Add(tableRowPath);


                        #endregion

                    }
                    break;

     到此为止，整个动态添加控件和随窗口滚动的界面就设计好了。

   5、实现功能界面如下：                                               

      但是细心的话还会发现，这里没有限制div区域或者浏览器的最小宽度，如果将浏览器的宽度变小，页面的布局还会被打乱；如果数据库中某种类型的试题量很大，那么整个页面的高度就会很大，而且不同章节下的不同题型数量不同，那么显示浏览试题的字体的大小也会有变化，给客户的感觉就不爽，因此，需要添加一个动态分页功能。

      新功能的实现，请期待下一篇博客。