<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>目录</title> <style type="text/css"> /*初始化*/ html,body,header,div,ul,li,dl,dd,p,input,iframe{ padding: 0px; margin: 0px; } li{ list-style-type: none; } input{ outline: none; } @font-face { font-family: 'iconfont'; /* project id 666160 */ src: url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.eot'); src: url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.woff') format('woff'), url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.ttf') format('truetype'), url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.svg#iconfont') format('svg'); } /*去除float clear=both display:table 但是会生成bfc 设置了父元素，子元素也会有。所以最好设置的范围最小 */ /*bfc 会是上下边距重叠*/ .clearFix::after{ content: ''; display: table; clear: both; } a{ text-decoration: none; cursor: pointer; } </style><!-- 初始化，基本 --> <style type="text/css"> html,body{ height: 100%; font-family: Microsoft Yahei,Lato,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Tahoma,sans-serif!important; } div{ } /*--table布局，只要设置table-cell的一个宽度就可以自适应*/ body{ font-family: Microsoft Yahei,Lato,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Tahoma,sans-serif!important; } ::-webkit-scrollbar { width: 2px; height: 2px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #FFF; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #4499ee; } .table{ display: table; box-sizing: border-box; width: 100%; height: 100%; padding: 5px; overflow-wrap: break-word; font-size: 16px; } .left{ box-sizing: border-box; width: 50px; height: 100%; display: table-cell; padding: 2px 0px; position: relative; text-align: left; border-radius:10px; border-bottom-right-radius: 0px; background-color:#333; white-space: nowrap; transition: all 0.1s; transition-timing-function: ease-in-out; } .left:hover{ width: 200px; text-align: center; } .searchBox .search{ border: none; } .searchBox input{ box-sizing: border-box; text-align:center; height:40px; border-top-left-radius: 10px; border-top-right-radius: 10px; border:1px solid #c8cccf; margin-top: -2px; color:#6a6f77; -web-kit-appearance:none; -moz-appearance: none; display:block; outline:none; padding:0 1em; text-decoration:none; width:100%; } .searchIndex{ position: absolute; top: 40px; bottom:2px; width:100%; box-sizing: border-box; border: none; overflow-x: hidden; overflow-y: scroll; } ul{ margin: 5px 2%; } ul li{ color:#ccc; margin-bottom: 5px; cursor: pointer; } li a{ color: inherit; display: inline-block; text-align: inherit; text-overflow: ellipsis; width: 100%; } li:hover{ color: #fff; } .mark{ width: 95%; left: 2.5%; border: 1px solid red; box-sizing: border-box; position: absolute; top: 0px; display: none; transition: all 1s; transition-timing-function: ease-in-out; } .right{ display: table-cell; position: relative; box-sizing: border-box; height: 100%; border: 1px solid grey; border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; } .right .content{ position: absolute; top:0px; bottom: 40px; width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px;/*要重写，不然还是会出错*/ box-sizing: border-box; } iframe{ height: 100%; width: 100%; border: none; overflow-y: scroll; } .right .edit{ position: absolute; bottom:0px; width: 100%; height: 40px; box-sizing: border-box; border: 1px solid grey; border-left: none; border-bottom-right-radius: 10px; } .edit ul{ height: 100%; } .edit li{ float: left; height: 100%; padding: 5px 20px; } .edit li span{ line-height: 100%; height: 20px; box-sizing: border-box; } .edit li input{ height: 25px; } .edit li button{ text-align: center; display: inline-block; width: 60px; height: 30px; line-height:1; } .editDiv{ display: none; position: absolute; top:0%; bottom: 0%; width: 100%; box-sizing: border-box; border-top-right-radius: 10px; border-top-left-radius: 10px; background-color: #00bb50; z-index: 100; } .editDiv textarea{ width: 100%; height: 100%; font-size: 16px; border: none; box-sizing: border-box; } .editModule{ width: 40px; position: absolute; right: 1px; top:100px; background-color: grey; text-align: left; white-space: nowrap; transition: all 0.5s; transition-timing-function: ease-in-out; } .editModule:hover{ width: 100px; text-align: center; } .editModule span{ display: block; border: 1px solid #6a6f77; } .editModule ul{ height: 300px; } .editModule li{ padding: 10px auto; } </style> </head> <body> <div class="table"> <div class="left"> <div class="searchBox"> <div class="search"> <input type="search" placeholder="搜索一下"><!-- placeholder在获得焦点时会消失 --> </div> </div> <div class="searchIndex" id="searchIndex"> <ul> <li><a href="javascript:routing1('http://www.baidu.com')">百度一下</a></li> <li><a href="javascript:routing1('http://www.w3school.com.cn/html/index.asp')">W3School</a></li> <li><a href="javascript:routing1('http://nodejs.cn/api/')">NodeJs</a></li> <hr> </ul> <ul> <li><a href="javascript:routing('h1')">第一个</a></li> <li><a href="javascript:routing('h2')">第二个</a></li> <li><a href="javascript:routing('h3')">第三个分发</a></li> <li><a href="javascript:routing('h4')">第四个我仍然想</a></li> <li><a href="javascript:routing('xiaomi')">第五个政治</a></li> <li><a href="javascript:routing('test')">第六个安慰安慰而为</a></li> </ul> <div class="mark" id="searchIndexMark"></div><!--用于红色标记--> </div> </div> <div class="right"> <div class="content" id="content" > <iframe src="http://www.baidu.com" id="iframe" name="iframe"></iframe> <div class="editDiv" id="editDiv"> <textarea id="editDivPre"></textarea> <div class="editModule" id="editModule"> <span>模板</span> <ul> <li data-attribute="hs">列表</li> <li data-attribute="dm">代码</li> <li data-attribute="qt">注意事项</li> <li data-attribute="qt">相关链接</li> </ul> </div> </div> </div > <div class="edit"> <ul> <li> <span>目录</span><input type="text"> <button οnclick="editAdd()" id="btAdd">添加</button> </li> <li> <button οnclick="editAlter()" id="btAlter">修改</button> </li> <li> <button οnclick="editOpen()" id="btOpen" disabled>打开</button> </li> <li> <button οnclick="editDelete()" id="btDel">删除</button> </li> <li> <button οnclick="editFin()" id="btFin" disabled>提交</button> </li> </ul> </div> </div> </div> </body> <script> var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } var Ele={ leftIframe:document.getElementById("iframe"),//内嵌iframe editDiv:document.getElementById("editDiv"),//编辑DIV editDivPre:document.getElementById("editDivPre"),//编辑textarea //leftFrameInnerEle:document.getElementById("iframe").contentWindow.document,//iframe内容,这个不随时更新 searchIndexUl :document.getElementById("searchIndex").getElementsByTagName("ul"),//搜索索引ul 是集合 searchIndexMark:document.getElementById("searchIndexMark"),//索引部分Mark btAdd:document.getElementById("btAdd"), btAlter:document.getElementById("btAlter"), btDel:document.getElementById("btDel"), btFin:document.getElementById("btFin"), btOpen:document.getElementById("btOpen"), editModule:document.getElementById("editModule") } var Config={ } var V={ btOpenValue:"",//编辑器内容 src:"",//在编辑按钮时，保存被编辑对应的 srcClick:"",//每次点击了索引li都会保存起来 srcInnerText:"",//在编辑按钮时，保存被编辑对应的 srcClickInnerText:"",//每次点击了索引li都会保存起来 selectionStart:0//textarea 光标位置 } function routing1(path,value){ console.groupCollapsed(arguments.callee.name+"函数在执行") console.log("path:"+path) console.groupEnd() if(value!=undefined){ path=path+"/s?wd="+value; } Ele.leftIframe.setAttribute("src",path);//会让iframe刷新 } function routing(path,value){//value是post字符串key=value&key1=value1 console.groupCollapsed(arguments.callee.name+"函数在执行") console.log("path:"+path) console.log("value:"+value) console.groupEnd() var xhr= xmlhttp; xhr.open("post",path,true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ Ele.leftIframe.setAttribute("src",path);//会让iframe刷新 // console.log(xhr.responseText) //对Left的编辑区内容和按钮设置 Ele.editDiv.style.display="none";//关闭editDiv Ele.btOpen.innerHTML="打开"; Ele.btOpen.disabled=false;//可以点击 Ele.btAlter.disabled=false;//可以点击 Ele.btFin.disabled=true;//不可以点击 V.btOpenValue= Ele.editDivPre.value;//保存起来原来编辑内容 V.srcClick=path; } }; xhr.send(value)//post方法将发送的参数写在这里 //xhr.send(null);//get方法下使用这个发送Ajax请求 } function editAdd(){ Ele.editDiv.style.display="inline-block"; var textStr="/*创建于"+new Date()+"*/"+"\n" Ele.editDivPre.value=textStr; var indexStart=Ele.editDivPre.value.length; Ele.editDivPre.selectionStart=indexStart; Ele.editDivPre.selectionEnd=indexStart; V.selectionStart=indexStart; Ele.editDivPre.focus();//必须放在对改元素修改的后面 } function editAlter(){ Ele.editDivPre.value=Ele.leftIframe.contentWindow.document.getElementsByTagName("html")[0].outerHTML;//内容要实时更新，不要保存到变量那里 Ele.editDiv.style.display="inline-block";//打开editDiv var indexStart=Ele.editDivPre.value.indexOf("<body>")+6; console.log("进编辑器查找到body:"+indexStart) Ele.editDivPre.selectionStart=indexStart; Ele.editDivPre.selectionEnd=indexStart; V.selectionStart=indexStart; Ele.editDivPre.focus();//必须放在对改元素修改的后面 Ele.btOpen.innerHTML="关闭"; Ele.btOpen.disabled=false;//可以点击 Ele.btAlter.disabled=true;//不可以点击 Ele.btFin.disabled=false;//可以点击 V.btOpenValue=Ele.editDivPre.value;//保存起来 V.src= V.srcClick;//保存变量,上次点击保存对的src V.srcInnerText= V.srcClickInnerText;//保存变量,上次点击保存对的li的文本 console.log("修改按钮，对应-->src："+V.src+"标题："+V.srcInnerText); } function editDelete(){ } function editFin(){ var path=V.src;//在编辑按钮触发时保存该src,用于提交的时候正确提交 console.log("提交按钮，对应-->src："+V.src+"标题："+V.srcInnerText) var value=Ele.editDivPre.value; V.btOpenValue=value;//保存起来 value=encodeURIComponent(value); value="write="+value; routing(path,value); Ele.editDiv.style.display="none";//关闭editDiv Ele.btOpen.innerHTML="打开"; Ele.btOpen.disabled=false;//可以点击 Ele.btAlter.disabled=false;//可以点击 Ele.btFin.disabled=true;//不可以点击 } function editOpen(){ if(Ele.btOpen.innerHTML=="打开"){ Ele.editDiv.style.display="inline-block";//打开editDiv Ele.btOpen.innerHTML="关闭"; Ele.btOpen.disabled=false;//可以点击 Ele.btAlter.disabled=true;//不可以点击 Ele.btFin.disabled=false;//可以点击 Ele.editDivPre.value=V.btOpenValue;//赋值 console.log("打开按钮，对应-->src："+V.src+"标题："+V.srcInnerText) }else{ Ele.editDiv.style.display="none";//打开editDiv Ele.btOpen.innerHTML="打开"; Ele.btOpen.disabled=false;//可以点击 Ele.btAlter.disabled=false;//可以点击 Ele.btFin.disabled=true;//不可以点击 V.btOpenValue=Ele.editDivPre.value;//保存 console.log("关闭按钮，对应-->src："+V.src+"标题："+V.srcInnerText) } } (function init(){ //设置搜索索引 li的点击事件 (function() { var ulLength=Ele.searchIndexUl.length; function clickFun(e){ var mark=Ele.searchIndexMark; var LiHeight=e.target.parentNode.clientHeight;//宽度,对于非嵌入style的获取方式 var liTop=e.target.parentNode.offsetTop; V.srcClickInnerText=e.target.innerText; mark.style.height=LiHeight+2+"px";//增加border的宽度 mark.style.display="inline-block"; mark.style.top=(liTop-1)+"px";//消除border的宽度 } var searchUls=Ele.searchIndexUl; for(var i=0;i<ulLength;i++){ var lis=searchUls[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++){ lis[j].addEventListener("click",clickFun,false); } } }()); //设置editModule的li的点击事件 (function(){ function clickFun(e){ var ele= e.target; var dataAttribute=ele.getAttribute("data-attribute"); var textStr=Ele.editDivPre.value; var inset=""; console.log("--->"+dataAttribute+"<"); switch (dataAttribute){ case "hs":{ inset="<ul><br><li></li></ul>"; break; } case "dm":{ inset="dmdmdmdmmdmdmd"; break; } default:{ inset="<ul>\n\t<li>gggg</li>\n</ul>" } } var subStr1=textStr.substring(0, V.selectionStart); var subStr2=textStr.substring(V.selectionStart,textStr.length); setTimeout(function(){ V.selectionStart=Ele.editDivPre.selectionStart+5; Ele.editDivPre.selectionStart= V.selectionStart; //选中区域左边界 Ele.editDivPre.selectionEnd= V.selectionStart; //选中区域右边界 //Ele.editDivPre.focus(); },1000) Ele.editDivPre.value=subStr1+inset+subStr2;//一定要先修改好内容，再设置光标 Ele.editDivPre.selectionStart= V.selectionStart; //选中区域左边界 Ele.editDivPre.selectionEnd= V.selectionStart+inset.length; //选中区域右边界 Ele.editDivPre.focus(); console.log( Ele.editDivPre.selectionStart+'---'+Ele.editDivPre.selectionEnd) } var mdUl=Ele.editModule.getElementsByTagName("ul"); for(var i=0;i<mdUl.length;i++){ var lis=mdUl[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++){ lis[j].addEventListener("click",clickFun,false); } } })(); (function(){ Ele.editDivPre.addEventListener("click",function(e) { V.selectionStart=e.target.selectionStart; console.log( V.selectionStart) });//点击区域，获得光标位置 Ele.editDivPre.addEventListener("input",function(e) { V.selectionStart=e.target.selectionStart; console.log( V.selectionStart) }) })() })() </script> </html>
看看
最新推荐文章于 2022-11-10 14:02:34 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
