`

创建隐藏区域

阅读更多
创建一次区域有多种方式,下面举例两种创建的方式:(其中主要是第二种方式)
第一种:将这个区域放到一个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 默认隐藏-->
    <div id="divBatchName" class="selectName">
        <div style="height: 50px; margin-top: 20px;">
            <label>
                批次名称</label>
            <asp:DropDownList ID="ddlSelectBatchName" runat="server" AutoPostBack="true" >
            </asp:DropDownList>
        </div>
        <div style="margin-top: 20px">           
            <asp:Button ID="btnDivBatchSure" runat="server" Text="确定" CssClass="btn_bg" ToolTip="确定"
                OnClientClick="divHideBatchName()"  />
        </div>
    </div>
    <!--End 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()" />
就这些代码 ,样式大家可以自行设计。
分享到:
评论

相关推荐

    终极隐藏 V2.0.3

    FinalHiding(终极隐藏)可以彻底的让一个文件或者目录...而FinalHiding基于文件系统的特性来创建隐藏区域,隐藏后的文件和目录在文件系统以上都是看不到的,而且可以方便的应用于移动存储如U盘、闪存卡、移动硬盘等,

    PADS中隐藏的12个小技巧解析.pdf

    一、如何走蛇形线?蛇形线是布线过程中常用的一种走线方式,其主要目的是为了调节延时满足系统时序设计要求,但是设计者应该有这样的认识:蛇形线会破坏信号质量,改变传输延时,布线时要尽量避免使用,因此一块 PCB...

    JS实现在Repeater控件中创建可隐藏区域的代码

    因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果。 防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方式,就是先显示每条数据的主要内容,而对于详细数据,...

    鼠标双击桌面空白区域隐藏图标的源码-易语言

    讲一下实现的原理和我研究的...编译的时候为了缩小软件的体积,用了黑月的界面创建,用汇编模式编译,编译完用了upx压缩,最后软件只有74k,其中一半还是程序图标的体积,源码只使用了精易模块,自己替换成自己的精易。

    视频资讯隐藏技术.pdf

    由于视频序列本身具有一些固有的特点,如过多的数据冗余、运动区域与非运动区域分布的不平衡等,而包括时间域掩蔽效应等特性在内的更为精确的人眼视觉模型尚未完全建立,使得视频信息隐藏处理技术存在许多迫切需要...

    隐藏在PCB设计中的七个DFM问题

    所以,在将设计发送给制造商之前,我们要注意下列DFM问题,因为它们可能隐藏在我们的设计之中。1.锐角 锐角是指印刷电路板中铜元件上的锐角或奇怪的角度,这些角会在PCB创建过程中导致酸的聚集。这个问题发生在...

    delphi经典编程入门

    OOP立意于创建软件重用代码,具备更好地模拟现实世界环境的能力,这使它被公认为是自上而下编程的优胜者。它通过给程序中加入扩展语句,把函数“封装”进Windows编程所必需的“对象”中。面向对象的编程语言使得复杂...

    leaflet-shades:传单插件,用于在未选定区域中创建灰色叠加层,并在选定区域中创建透明叠加层

    传单插件,用于在未选中的区域中创建灰色叠加层。 该插件添加到Leaflet.Editable上,从而可以在Leaflet中编辑几何图形( ) 小叶阴影专门在Leaflet.Editable的矩形编辑器上扩展。 最初,Leaflet.Editable的几何图形...

    vue实现点击隐藏与显示实例分享

    1、新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。 代码: &lt;button &gt;点击隐藏再点显示&lt;/button&gt;

    AngularJS中实现显示或隐藏动画效果的方式总结

    AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。...→界面中显示/隐藏的区域提供ng-if和controller中

    hmm模型matlab代码-Gene-Finding-HMM:隐藏式马尔可夫模型(HMM)用于分离细菌DNA中的基因和基因间区域

    隐藏式马尔可夫模型(HMM)用于分离细菌DNA中的基因和基因间区域 等级= 100% 问题1 a)使用霍乱弧菌的基因组序列和基因注释,创建配置表 代码: i)基因间区域的平均长度:1164.4bp ii)遗传区域的平均长度:991....

    针对能量差值嵌入的视频隐藏分析算法 (2008年)

    能量差值信息隐藏(differential energy watermarking,DEW)算法通过有选择地舍弃视频图像中某些区域的部分高频DCT系数,形成能量差异而达到信息嵌入的目的为此,利用视频序列时间域的强相关性建立针对性统计估计模型...

    PB Datawindow 未文档的隐藏功能--- 报表显示列内容不被分页分割显示设置

    它更改了完全不适合报表详细信息区域的列的行为: Datawindow属性pushCutControlToNextPage和DW_PUSH_CUT_CONTROL_TO_NEXT_PAGE设置为NO(标准) 行为: 文本被分割,其中一些显示在下一页上。 这可能导致文本被分割...

    illustrator课堂笔记-自己总结

    只输出画布以内区域:对象-画布区域对象—建立 隐藏图形:ctrl+3 解除隐藏:ctrl+alt+3 锁定图形:ctrl+2 解除锁定:ctrl+alt+2 粘贴置前:ctrl+F 层的排列:前移一层ctrl+],后移一层ctrl+【,前移最前:ctrl+shift...

    将不同类型的快捷方式“隐藏”在微小的Manganese Menu

    当离开Manganese Menu菜单面板显示区域时,该菜单即可自动消失。实际上,即使当前窗口处于全屏运行状态(例如在全屏幕状态下观看电影),Manganese Menu图标,可以自动“吸附”在该窗口的左上角,这样不必关闭该窗口,...

    用快捷键就能创建新文件夹的软件

    创建新文件夹是我们每天几乎都在做的事情,... 提示:每次都运行软件才能用热键创建新文件夹,显然比较麻烦,在设置界面中,还能设定软件是否随系统启动,以及是否运行后隐藏任务栏的图标等,这样使用起来就更加方便了

    DeepSteganography:在Plain Sight中隐藏图像

    通常,隐写术用于在较大图像的嘈杂区域内不显眼地隐藏一条小消息。 在这项研究中,我们尝试将全尺寸彩色图像放置在另一个相同尺寸的图像中。 深度神经网络被同时训练以创建隐藏和显示过程,并被设计为专门用于一对...

    桌面便签软件 fences2+注册机

    Fences由著名的系统美化公司...2、双击桌面空白区域(或按Esc),便会快速隐藏所有桌面图标,再次双击,图标又会回来; 3、可通过鼠标右键在桌面画一个矩形的Fences,任意调整其位置和大小;可创建桌面图标快照。

    java图形用户界面显示多行多列按钮

    ② 文本框数字改变时,自动刷新下部网格区域的按钮。 ③ 鼠标进入按钮时,在该按钮上显示“★”,将该按钮背景色设置为红色。 ④ 鼠标移出按钮时,隐藏该按钮上的文字,将该按钮背景色设置为绿色。 说明:“★”可经...

Global site tag (gtag.js) - Google Analytics