<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style> p,ul,li{margin:0;padding:0;} li{list-style:none;} #mainConent{position:relative;top:0;left:0;} #mainConent p{width:400px;height:200px;border:10px solid #CCCCCC;background:#fff;} #mainConent ul{width:70px;position:absolute;top:0;left:430px;} #mainConent li{background:#ccc;margin-top:1px;text-align:center;color:#fff;} #mainConent li#active{background:#999999;} .default{display:none;} .showDefault{display:block;} #expainDiv{width:400px;height:100px;border:10px solid #FF33CC; position:relative;top:10px;left:0; display:none;} #expainDiv span{position:absolute;top:0;right:6px;font-size:24px;} #expainDiv ul{position:absolute;top:15px;left:10px;width:350px;height:20px;border-bottom:1px solid #FF0000;} #expainDiv li{position:absolute;width:50px;height:20px;text-align:center;} #find{left:10px;} #replace{left:61px;} #findDiv,#replaceDiv{position:absolute;left:10px;top:50px;} #findText,#replaceSrcText,#replaceDesText{border:1px solid #FF6600;} #textBg{background:#FFFF00;} </style> <script> window.onload = function(){ var mainLi = document.getElementById('mainConent').getElementsByTagName('li'); var expainDiv = document.getElementById('expainDiv'); var findLi = document.getElementById('find'); var replaceLi = document.getElementById('replace'); var findText = document.getElementById('findText'); var findInput = document.getElementById('findDiv').getElementsByTagName('input'); var contentP = document.getElementsByTagName('p')[0]; var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input'); var deleteSpan = document.getElementById('expainDiv').getElementsByTagName('span')[0]; var onOff = true; mainLi[0].onclick = function(){ if(onOff){ mainLi[1].className = 'showDefault'; /* 直接用class替換*/ mainLi[2].className = 'showDefault'; mainLi[0].innerHTML = '閉合'; }else{ mainLi[1].className = 'default'; mainLi[2].className = 'default'; mainLi[0].innerHTML = '展開'; expainDiv.style.display = 'none'; } onOff = !onOff; }; mainLi[1].onOff = 1; mainLi[2].onOff = 2; mainLi[1].onclick = mainLiFun; mainLi[2].onclick = mainLiFun; findLi.onOff = 1; replaceLi.onOff = 2; findLi.onclick = mainLiFun; replaceLi.onclick = mainLiFun; /*右上角的刪除x*/ deleteSpan.onclick = function(){ expainDiv.style.display = 'none'; }; /*查找*/ findInput[1].onclick =function(){ var strfind = findInput[0].value; var contentStr = contentP.innerHTML; if(!strfind){ alert("請輸入查找的字符串！"); return; }else if(contentStr.indexOf(strfind) == -1){ alert("輸入的信息找不到！"); return; } contentP.innerHTML = contentStr.split(strfind).join('<span id="textBg">'+strfind+'</span>'); }; /*替換*/ replaceInput[2].onclick = function(){ var replaceSrc = replaceInput[0].value; var replaceDes = replaceInput[1].value; var contentStr = contentP.innerHTML; if(!replaceSrc){ alert("請輸入要被替換的文字！"); return; }else if(contentStr.indexOf(replaceSrc) == -1){ alert("輸入有誤，找不到 "+replaceSrc+" !"); return; }else if(!replaceDes){ if(!confirm("確定刪除字符串 "+replaceSrc+" 嗎？")) return; } contentP.innerHTML = contentStr.split(replaceSrc).join('<span id="textBg">'+replaceDes+'</span>'); }; }; function mainLiFun(){ var findLi = document.getElementById('find'); var replaceLi = document.getElementById('replace'); var findDiv = document.getElementById('findDiv'); var replaceDiv = document.getElementById('replaceDiv'); var findInput = document.getElementById('findDiv').getElementsByTagName('input'); var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input'); if(this.onOff ==1){ hiddenExpainDivLiFun(replaceLi); expainDivLiFun(findLi); replaceDiv.style.display = 'none'; findDiv.style.display = 'block'; findInput[0].value = ""; }else if(this.onOff ==2){ hiddenExpainDivLiFun(findLi); expainDivLiFun(replaceLi); findDiv.style.display = 'none'; replaceDiv.style.display = 'block'; replaceInput[0].value = ""; replaceInput[1].value = ""; } } function expainDivLiFun(id){ expainDiv.style.display = 'block'; findDiv.style.display = 'block'; id.style.background = '#FF0000'; id.style.color = '#fff'; } function hiddenExpainDivLiFun(id){ expainDiv.style.display = 'block'; findDiv.style.display = 'block'; id.style.background = ''; id.style.color = '#000'; } </script> </head> <body> <div id="mainConent"> <p>4消息類型包括3種1由模塊發送的動作類 顯示類命令執行消息配置變更任務會接受到命令字符串， 監聽任務會將字符串放到延遲發送緩沖區中，目的是防止產生大量的trap。在短時間內相同的動作，只發送一次 2有cfg模塊發送的配置變更消息配置變更任務會主動與時上一下保存的配置進行比較找出a添加，刪除和變更的命令，將上述命令字符通過命令轉換層轉換成可執行的命令。放入發送隊列。3命令發送消息，每2秒鍾執行，目的是將發送隊列中的消息，組成trap 發送給告警模塊。 </p> <ul> <li id="active">展開</li> <li class ="default">查找</li> <li class="default">替換</li> </ul> </div> <div id="expainDiv"> <span>x</span> <ul> <li id="find">查找</li> <li id="replace">替換</li> </ul> <div id="findDiv"> <input type="text" id="findText" /> <input type="button" value="查找"/> </div> <div id="replaceDiv"> <input type="text" id="replaceSrcText" /> <input type="text" id="replaceDesText" /> <input type="button" value="替換"/> </div> </div> </body> </html>