Javascript實現(xiàn)代碼折疊功能

字號:


    代碼折疊起來,使整段程序縮成一行,看起來清爽了許多。大家在使用Visual Studio環(huán)境進(jìn)行開發(fā)時,可以把某個類或某個函數(shù)折疊起來,在很多網(wǎng)頁上也有類似的功能,那到底是如何實現(xiàn)的呢?其實很簡單,只要通過JavaScript就可以實現(xiàn)。
    一、首先定義一個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';
     }
    }
    二、然后在網(wǎng)頁上定義一個div和一個ul,注意div中要包含一個id為level開頭的image和一個onclick事件,ul中id要包含row,默認(rèn)情況下是展開的,如果需要默認(rèn)為閉合,則要在ul中加入style="display:none"
    例子如下:
    <body>
    <divstyle="CURSOR: hand"
    onclick="puckerMenu('1');"><IMGid=level1
    src="images/minus.gif">public class DataAccess</div>
    <ulid=row1>
    <li> private string connString;
    <divstyle="CURSOR: hand"
    onclick="puckerMenu('2');"><IMGid=level2
    src="images /plus.gif">protected DbConnection OpenConnection()</div>
    <ulid=row2style="display:none">{...}</ul>
    <li>
    Other
    </ul>
    </body>
    總結(jié)
    以上就是本文的全部內(nèi)容,希望對有需要的人能有所幫助。