创造隐藏区域

2012-10-18

创建隐藏区域创建一次区域有多种方式，下面举例两种创建的方式：（其中主要是第二种方式）第一种：将这个区域放

创建隐藏区域
创建一次区域有多种方式，下面举例两种创建的方式：（其中主要是第二种方式）
第一种：将这个区域放到一个div中，如果其id为hiddenDiv，则可以调用document.getElementById("hiddenDiv").hidden()和document.getElementById("hiddenDiv").show()隐藏和显示这个div的区域
第二种：同样的将这个区域放到div中，也将其id设置为hiddenDiv，可以设置其display='none'将其设置为隐藏，如果要将其显示的话，只需要调用document.getElementById("hiddenDiv").style.display='block';
为什么要使用第二种方式：
第一种方式在加载时，隐藏的区域会短暂出现，尤其是在快速刷新该网页的内容时表现的更为明显；
第二种方式在加载时，隐藏区域不会出现地一种使用方式的状况
之所以会出现上面这种情况，是由于：第一种方式将为隐藏区域保留物理空间，而第二种方式则不会为隐藏的对象保留物理空间

下面是第二种方式使用的一个具体例子：
在页面加载的时候，默认隐藏，当触发一个服务器控件时，显示此DIV，然后对此操作完成后，在点击DIV上服务器控件隐藏DIV，方法很简单，可以用客户端控件，同样的道理。　　下面就把代码贴出来。
第一设置CSS
<style type="text/css">
        .selectName
        {
            margin-left: 30%;
            width: 150px;
            height: 150px;
            margin-top: 30px;
            position: absolute;
            background-color: #eef6ff;
            z-index: 0;
            display: none;
        }
    </style>
第二是DIV


    <div id="divBatchName" runat="server" AutoPostBack="true" >
            </asp:DropDownList>
        </div>
        <div style="margin-top: 20px">
            <asp:Button ID="btnDivBatchSure" runat="server" Text="确定" CssToolTip="确定"
                OnClientClick="divHideBatchName()" />
        </div>
    </div>
    
第三 JS脚本
<script language="javascript" type="text/javascript">
   //显示 div
        function divShowBatchName() {
            var showBatchName = document.getElementById("divBatchName");
            showBatchName.style.display = 'block';
        }
        //隐藏 div
        function divHideBatchName() {
            var hideBatchName = document.getElementById("divBatchName");
            hideBatchName.style.display = 'none';
        }

   </script>
触发显示DIV服务器控件
<asp:Button ID="btnGivenBatch" runat="server" Text="显示DIV" OnClientClick="divShowBatchName()" />
就这些代码，样式大家可以自行设计。

热点排行

Web前端

创造隐藏区域