主目录

最新推荐文章于 2025-06-23 06:59:39 发布
原创最新推荐文章于 2025-06-23 06:59:39 发布 · 229 阅读
CC 4.0 BY-SA版权
<!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 onclick="editAdd()" id="btAdd">添加</button>
            </li>
            <li>
                <button onclick="editAlter()" id="btAlter">修改</button>
            </li>
            <li>
                <button onclick="editOpen()" id="btOpen" disabled>打开</button>
            </li>
            <li>
                <button onclick="editDelete()" id="btDel">删除</button>
            </li>
            <li>
                <button onclick="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>