feipeng

不要过分强调技术,思想才是关键!
  新随笔  :: 管理

折叠内容

Posted on 2007-06-14 13:57  FrankFei  阅读(977)  评论(2编辑  收藏  举报
 

大家在使用Visual Studio环境进行开发时,可以把某个类或某个函数折叠起来,在很多网页上也有类似的功能,像cnblogs中的代码段,那到底是如何实现的呢?其实很简单,只要通过JavaScript就可以实现。

首先定义一个JavaScript function,如下:

function puckerMenu(level) {

 var levelLength = ('row' + level).length;

 var toDo = '0';

 for (var iCount = 0 ; iCount < document.all.length; iCount++){

    if ( document.all[iCount].id.indexOf('row' + level) > -1 && ( document.all[iCount].id.length > levelLength)) {

      if ( document.all('level' + level).src.indexOf('minus.gif') > -1 ) {

        document.all[iCount].style.display = 'none';   

        toDo = '1';

      } else {

        document.all[iCount].style.display = 'block';

        toDo = '0';

      }

    }  

 }

 

 if ( toDo == '1' ) {

    document.all('level' + level).src = 'images/plus.gif';   

 } else {

    document.all('level' + level).src = 'images/minus.gif';  

 }

}

然后在网页上定义一个div和一个ul,注意div中要包含一个idlevel开头的image和一个onclick事件,ulid要包含row,默认情况下是展开的,如果需要默认为闭合,则要在ul中加入style="display:none",例子如下:

<body>

    <div style="CURSOR: hand"

                  onclick="puckerMenu('1');"><IMG id=level1

                  src="images/minus.gif">public class DataAccess</div>

    <ul id=row1 >

        <li> private string connString;

        <div style="CURSOR: hand"

                  onclick="puckerMenu('2');"><IMG id=level2

                  src="images /plus.gif">protected DbConnection OpenConnection()</div>

 

        <ul id=row2 style="display:none">{...}</ul>

            <li>

        Other

    </ul>

</body>