HTML-003-模拟IDE代码展开收起功能简单示例

当先我们在日常的编程开发工作中使用编程工具（例如 Eclipse、Sublime 等等）都有相应的代码折叠展开功能，如下图所示，极大的方便了我们的编码工作。

同时，我们在日常的网页，尤其的广大的博客网站的源码展示部分，都采用了此种显示方式，如下图所示（示例引用位置：008-Selenium 操作下拉列表实例-Select）：

这么做的意义何在呢？我觉得其实际应用有如下两种：

  1. 内容的展示和隐藏：将用户最关心、感兴趣的内容展示给用户，若用户想继续深入了解，则可通过点击展示或隐藏按钮达到查看、隐藏内容的目的，从而在最小的显示区域，显示出更多用户感兴趣的咨询内容；
  2. 应用于各种在线报告：例如，公司不同职位的人查看报告时，关心的数据不一样，那么就可针对不同的职位展示或隐藏一部分咨询内容，节约相关人员的时间，优化系统体验。不过此种方法也较多的运用于当前的 CI 的日常报告中。

那么该如何实现呢？下面就针对此进行简单的说明，实现此功能简单的步骤如下所示：

  1. 创建一个 div ：A，作为父级信息容器
  2. 在容器 A 中创建两个元素，例如：一个 label，用以标示类似 展开/隐藏 的按钮；一个 div : B，作为子级信息容器（初始不显示），此容器存放需要显示的信息
  3. 通过 label 的 onclick 控制子级容器 B 是否显示

直接上码了，敬请各位小主参阅，若有不足之处，敬请大神指正，非常感谢！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>模拟IDE代码展开收起功能</title>
        <META http-equiv=Content-Type content="text/html; charset=utf-8">
    </head>

    <body>
        <div id="popDiv" style="height:auto!important;height:20px;border:1px solid grey;" >
            <label id="method" type="button" style="width:200px;" onclick="var sta = document.getElementById('popTitle'); var mod = document.getElementById('method'); if(sta.style.display == 'none'){sta.style.display='';mod.innerText='-';mod.innerHTML='-';}else{sta.style.display='none';mod.innerText='+';mod.innerHTML='+';};">+</label>

            <div id="popTitle" visibility="hidden" style="display:none;">
                <pre style="word-break:break-all;width:40px;height:200px;">
                    简单示例：模拟 IDE 的代码展开收起功能

                    在日常的网页开发过程中，有一些内容我们不想其在初始页面后就展示，而是选择将其像众多编程 IDE 工具一样，
                    收起相应内容，以将其他用户关注或感兴趣的部分，优先显示给用户。当用户需要查看相应的内容时，通过点击
                    展开或者收起按钮，即可查看隐藏相应的部分。

                    实际应用：
                    1、内容的隐藏和展开
                    2、自动化测试报告日志展示隐藏
                </pre>
            </div>

            <div id="popForm"> <!-- 表单div -->
            </div>
        </div>
    </body>
</html>

实际展示效果如下所示：

当然上述示例，与 IDE 或 cnblogs 中的展示隐藏效果相差甚远，感兴趣的小主们可自行研究，进而实现与 IDE 或 cnblogs 中等同的显示效果，再次不再做详细的说明。

 

至此， HTML-003-模拟IDE代码展开收起功能简单示例 顺利完结，希望此文能够给初学 HTML 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

 

posted @ 2015-08-14 13:52  范丰平  Views(1461)  Comments(0)  Edit  收藏  举报