窗体的视图切换效果

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

       这个功能主要有两部分：

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

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

      

             

下面是具体代码：

        首先是html代码：    

<span style="font-size:18px;">    <a href="#" class="easyui-linkbutton c6" iconCls="icon-reload" style="width: 2%; margin: 0 5px; float: left;" onClick="SwitchToggole()" ></a></span>

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

        然后是js代码： 

<span style="font-size:18px;">//视图转换的功能方法：搜索框居中或者表格居中    //先使用函数加载窗体的数据，<strong><span style="color:#ff0000;">这句代码必须有</span></strong>    $(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;    };</span>

      

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

 PS：

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

 

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

   

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

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