窗体的视图切换效果

         从ITOO的2.0 中期开始，勇霞师姐让我尝试着参照Java版的代码将.net的窗体实现类似百度的搜索界面，说起来并不难，今天我来将这个小功能分享给大家：

       这个功能主要有两部分：

    1.窗体加载时简单大方的界面：

     2.点击“查询”后窗体的正常显示：

      

             

下面是具体代码：

        首先是html代码：    

        [ 使用该代码添加一个按钮，也就是添加按钮左侧的效果切换按钮。]

        然后是js代码： 

//视图转换的功能方法：搜索框居中或者表格居中
    //先使用函数加载窗体的数据，这句代码必须有
    $(function () {
        var switchFlag = 0;
        DataGridCenter();
        SearchBoxCenter();
    })
 
    //视图转换的方法
    function SwitchToggole() {
        if (switchFlag == 0) {
            SearchBoxCenter();
        } else {
            DataGridCenter();
        }
    }
    ----------------------------搜索框居中的方法--------------------------------
    //$("#search_box").click(function () {
    function SearchBoxCenter() {
        $("#upload").css('display', 'none');
        $("#ContentAreas").css('display', 'none')  //实现内容区域的隐藏
        $("#tips").css('display', 'none');
        $("#a").css({         //搜索框和按钮的外层div
            "display": "block",
            "position": "relative",
            "left": "55%",
            "top": "240px",
            "height": "25px",
            "font-size": "16px",
            "width": "400px"
        });
        $("#footer").css({                 //脚注的设置
            "font-size":"16px",
            "display":"block",
            "margin-left": "45%",
            "margin-top":"25%",
            "margin-bottom":"120px"
        });
        switchFlag = 1;                   //执行完之后，将switchFlag的值设置为1，值的变化实现效果的切换
    };
    ------------------------表格居中的方法-------------------------------
    function DataGridCenter() {       
        $("#ContentAreas").css('display', 'block');
        $("#upload").css('display', 'block');
        $("#tips").css('display', 'block');  // 隐藏“请选择实体”和下拉框
        //搜索框区域的样式
        $("#a").removeAttr("style");        //移除该div的样式，重新设定
        $("#a").css({                       
            "display": "block",
            "position":"fixed",
            "top":"30px",
            "left": "260px",
            "width":"400px",
            "margin-bottom":"5px"
        });
        $("#footer").css('display', 'none');
        //执行完之后将数值转化为0
        switchFlag = 0;
    };

      

     这个功能主要是在css的基础上，对按钮的数值进行分析变换，实现效果的切换。

 PS：

      之前的实现过程中，出现过这样的问题：

 

       界面中部分div为0，但在VS中是确切的值。这个问题出现的原因是：在实现第一幅图的界面时，窗体中表格的属性均为隐鲹，所以窗体没有加载出DataGrid的样式。所以在js代码中添加：

   

      在加载时，先调用DataGridCenter（）的方法将所有的样式都加载出来，但加载不代表显示给用户看，只是程序内部执行该方法，然后再调用SearchBoxCenter（）方法，这样就可以将关于表格的所有样式都加载出来，只是不显示，而不会出现样式数据加载不出来的问题。

        到这里，这个功能就实现了，有什么问题，欢迎指点。