仿Visual Studio面板嵌入/浮起/折回三种效果

最新推荐文章于 2024-10-21 18:09:53 发布
丑心疼
最新推荐文章于 2024-10-21 18:09:53 发布
阅读量288
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/youtianxia/p/4812384.html
版权
<!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=utf-8" />
    <title>仿Visual Studio面板嵌入/浮起/折回三种效果丨唐山轻质隔墙板|kiddy官网</title>
    <style type="text/css">
    html,body,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,caption,th,td,img,form,fieldset,legend,input,label,button,textarea { margin:0; padding:0; }
    html,body { font:12px/16px arial,Simsun,sans-serif; color:#333; text-align:center; background:#fff; overflow:hidden; }
    body {
    scrollbar-face-color:#78c9ef;
    scrollbar-shadow-color:#ccf;
    scrollbar-highlight-color:#fff;
    scrollbar-3dlight-color:#2eb4f3;
    scrollbar-darkshadow-color:#fff;
    scrollbar-track-color:#e0f1fc;
    scrollbar-arrow-color:#fff;
    }
    ul { list-style:none; }
    #layout_header,
    #layout_content,
    #layout_footer { width:1024px; margin:0 auto; }
    #layout_header { height:91px; }
    #layout_content { position:relative; overflow:hidden; }
    #layout_footer { height:28px; background:#efefef url(/html/txdm_2/images/20101007/bg_footer.png) no-repeat 100%; }
    #layout_footer span { display:block; height:100%; line-height:28px; vertical-align:middle; background:url(/html/txdm_2/images/20101007/bg_footer.png) no-repeat 0; }
    #layout_header {
    border-bottom:2px solid #2eb4f3;
    background:url(/html/txdm_2/images/20101007/bg_banner.jpg) no-repeat 100%;
    }
    #layout_header h1 {
    width:500px;
    height:100%;
    text-indent:-9999px;
    background:url(/html/txdm_2/images/20101007/logo.png) no-repeat;
    overflow:hidden;
    float:left;
    }
    .layoutInner {
    height:100%;
    overflow:auto;
    }
    .toolsTags,.toolsTags2 {
    position:absolute;
    left:0;
    border-right:1px solid #2eb4f3;
    background:#fff;
    z-index:9;
    }
    .toolsTags {
    width:20px;
    height:100%;
    }
    .toolsTags2 {
    width:auto;
    height:20px;
    bottom:0;
    _bottom:-1px;
    }
    .toolsTags li {
    height:79px;
    padding-top:10px;
    line-height:120%;
    text-align:center;
    cursor:pointer;
    }
    .toolsTags li,
    .toolsTags li.now {
    padding-left:2px;
    font-weight:700;
    background:url(/html/txdm_2/images/20101007/un_tags.png);
    }
    .toolsTags li {
    color:#999;
    background-position:0 -89px;
    }
    .toolsTags li.now {
    margin-left:0;
    color:#fff;
    background-position:0 0;
    }
    .toolsTags2 li,
    .toolsTags2 li.now {
    font-weight:700;
    line-height:20px;
    vertical-align:middle;
    background:url(/html/txdm_2/images/20101007/un_tags.png);
    }
    .toolsTags2 li {
    width:89px;
    height:100%;
    color:#fff;
    text-align:center;
    background-position:0 -178px;
    cursor:pointer;
    float:left;
    }
    .toolsTags2 li.now {
    border-top:0;
    color:#069;
    background-position:-89px -178px;
    }
    .toolsContent,.toolsContent2 {
    height:100%;
    border:1px solid #2eb4f3;
    border-top:0;
    border-left:0;
    background:#fff;
    filter:alpha(opacity=75);
    opacity:.75;
    }
    .toolsContent {
    position:absolute;
    top:0;
    }
    .toolsContent2 {
    border-left:1px solid #2eb4f3;
    border-right:0;
    float:left;
    }
    .toolsContent .toolsC,
    .toolsContent2 .toolsC {
    text-align:left;
    overflow:auto;
    word-break:break-all;
    }
    .toolsContent .toolsCin { padding:5px; }
    .toolsContent2 .toolsCin { padding:5px 5px 24px 5px; }
    .toolsTitle {
    height:24px;
    text-indent:8px;
    font-weight:700;
    color:#006599;
    line-height:24px;
    text-align:left;
    vertical-align:middle;
    background:url(/html/txdm_2/images/20101007/bg_toolsTitle.png) repeat-x;
    }
    .toolsTitle a {
    display:block;
    width:16px;
    height:16px;
    margin:3px;
    text-indent:-999px;
    background:url(/html/txdm_2/images/20101007/un_float_ctrl.png);
    overflow:hidden;
    float:right;
    }
    .toolsTitle a.clickFold {
    background-position:0 -32px;
    }
    .toolsTitle a.clickTo {
    background-position:0 0;
    }
    .toolsTitle a.clickTo2 {
    background-position:0 -16px;
    }
    .toolsBar {
    position:absolute;
    top:0;
    width:1px;
    height:100%;
    background:#2eb4f3;
    cursor:col-resize;
    -moz-user-select:none;
    z-index:8;
    }
    </style>
    <script>
    /*
    * By ximenchuixue, QQ:149561420, email:sabesabe3314@163.com *
    */
    var ximen = {
    $:function(o){
    return document.getElementById(o);
    },
    getChild:function(o,s) {
    var x;
    if(s == "first") { x = o.firstChild; while(x.nodeType != 1) { x = x.nextSibling; } }
    else { x = o.lastChild; while(x.nodeType != 1) { x = x.previousSibling; } }
    return x;
    },
    isIn:0,
    ini:[
    20,              //0,tagsWidth
    1024,             //1,maxWidth
    '-302px',           //2,defaultLeft
    'toolsContent',        //3,
    'toolsContent2',       //4,
    'none',            //5,
    'block',           //6,
    'right',           //7,
    'clickTo2',          //8,
    'clickTo',          //9,
    'inline',           //10,
    'auto',            //11,
    'now',            //12,
    'toolsTags',         //13,
    'toolsTags2',         //14,
    'layoutInner',        //15,
    'out',            //16,
    'in',             //17,
    'clickTo',          //18,
    'clickFold',         //19,
    '嵌入',            //20,
    '浮起',            //21,
    24,              //22,
    'layout_header',       //23,
    'layout_content',       //24,
    'layout_footer',       //25,
    512,             //26,
    300,             //27
    ]
    };
    /*op：浮动层容器；oc：右侧主内容；maxR：往右拖拽最大位移；maxL：往左拖拽最大位移；*/
    ximen.drag = function(op,oc,maxR,maxL) {
    var par = op.parentNode,
    parHeight = par.offsetHeight,
    parLeft = par.offsetLeft,
    o = ximen.getChild(op,'first'),    //o：拖拽线条；
    oLast = ximen.getChild(op,'last'),  //面板显示内容区；
    mouseDown = function(e){
    var e = e || window.event,
    toolsContent = op,
    layoutInner = ximen.$(oc),
    mouseMove = function(e){
    var e = e || window.event,x = ximen.ini[0];
    if(toolsContent.className == ximen.ini[4]) {
    x = 0;
    e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
    e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
    layoutInner.style.width = ximen.ini[1] - toolsContent.offsetWidth + "px";
    }
    e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
    e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
    };
    if(o.setCapture){ o.setCapture(); }
    document.onmousemove = function(event) { mouseMove(event); }
    document.onmouseup = function() {
    if(o.releaseCapture){ o.releaseCapture(); }
    document.onmousemove = null;
    }
    };
    op.style.width = maxL + "px";
    op.style.height = parHeight - 1 + "px";
    oLast.style.height = parHeight - ximen.ini[22] - 1 + "px";
    o.style.left = maxL + "px";
    o.onmousedown = function(event) { mouseDown(event); }
    }
    ximen.layoutTo = function(o,oc,s,sClickTo,sClickFold) {
    var toolsContent = ximen.$(o),
    toolsTags = ximen.$(ximen.ini[13]),
    layoutInner = ximen.$(oc),
    clickTo = ximen.$(sClickTo),
    clickFold = ximen.$(sClickFold),
    sArr,
    sIn = [
    ximen.ini[4],
    ximen.ini[14],
    ximen.ini[1] - toolsContent.offsetWidth + 'px',
    ximen.ini[7],
    ximen.ini[8],
    function(){ximen.layoutTo(o,oc,ximen.ini[16],sClickTo,sClickFold)},
    ximen.ini[5],
    1,
    ximen.ini[2],
    ximen.ini[21]
    ],
    sOut = [
    ximen.ini[3],
    ximen.ini[13],
    ximen.ini[11],
    ximen.ini[5],
    ximen.ini[9],
    function(){ximen.layoutTo(o,oc,ximen.ini[17],sClickTo,sClickFold)},
    ximen.ini[10],
    0,
    ximen.ini[0] + 'px',
    ximen.ini[20]
    ];
    sArr = (s == ximen.ini[17]) ? sIn : sOut;
    toolsContent.className = sArr[0];
    toolsContent.style.left = sArr[8];
    toolsTags.className = sArr[1];
    layoutInner.style.width = sArr[2];
    layoutInner.style.styleFloat = sArr[3];
    layoutInner.style.cssFloat = sArr[3];
    clickTo.className = sArr[4];
    clickTo.title = sArr[9];
    clickTo.onclick = sArr[5];
    clickFold.style.display = sArr[6];
    ximen.isIn = sArr[7];
    }
    ximen.layoutFO = function(o,s) {
    var toolsContent = ximen.$(o),
    toolsContentWidth = toolsContent.offsetWidth,
    i = 40;
    if(s == 'fold') {
    toolsContent.aWhile = setInterval(function(){
    if(parseInt(toolsContent.style.left) <= -toolsContentWidth) {
    toolsContent.style.left = - toolsContentWidth + 'px';
    clearInterval(toolsContent.aWhile);
    }
    toolsContent.style.left = toolsContent.offsetLeft - i + 'px';
    i *= 1.1;
    },10);
    }
    else {
    if(parseInt(toolsContent.style.left) < ximen.ini[0]) {
    toolsContent.aWhile = setInterval(function(){
    if(parseInt(toolsContent.style.left) >= -ximen.ini[0]*3) {
    clearInterval(toolsContent.aWhile);
    setTimeout(function(){toolsContent.style.left = ximen.ini[0] + 'px';},1);
    }
    toolsContent.style.left = toolsContent.offsetLeft + i + 'px';
    },1);
    }
    }
    }
    ximen.setTags = function() {
    var toolsTags = ximen.$(ximen.ini[13]),
    lis = toolsTags.getElementsByTagName('li'),
    lisLen = lis.length,
    arrEle = [
    ximen.ini[3],
    ximen.ini[15],
    ximen.ini[18],
    ximen.ini[19]
    ],
    arr,
    arr1 = [
    arrEle[0],
    ximen.ini[5],
    '0',
    function(k){ return ximen.ini[11]; },
    ximen.ini[5],
    ximen.ini[5],
    ximen.ini[5],
    2,
    ximen.ini[9],
    ximen.ini[10],
    ximen.ini[17],
    1,
    ximen.ini[20]
    ],
    arr2 = [
    ximen.ini[4],
    ximen.ini[6],
    ximen.ini[2],
    function(j){ return ximen.ini[1] - ximen.$(arrEle[0] + (j + 1)).offsetWidth + 'px'; },
    ximen.ini[7],
    ximen.ini[7],
    ximen.ini[6],
    3,
    ximen.ini[8],
    ximen.ini[5],
    ximen.ini[16],
    0,
    ximen.ini[21]
    ],
    toset = function(n,a) {
    ximen.$(arrEle[0] + (n + 1)).className = a[0];
    ximen.$(arrEle[0] + (n + 1)).style.display = a[1];
    ximen.$(arrEle[0] + (n + 1)).style.left = a[2];
    ximen.$(arrEle[1] + (n + 1)).style.width = a[3](n);
    ximen.$(arrEle[1] + (n + 1)).style.styleFloat = a[4];
    ximen.$(arrEle[1] + (n + 1)).style.cssFloat = a[5];
    ximen.$(arrEle[1] + (n + 1)).style.display = a[6];
    ximen.$(arrEle[1] + (n + 1)).style.zIndex = a[7];
    ximen.$(arrEle[2] + (n + 1)).className = a[8];
    ximen.$(arrEle[2] + (n + 1)).title = a[12];
    ximen.$(arrEle[3] + (n + 1)).style.display = a[9];
    (function(x) {
    ximen.$(arrEle[2] + x).onclick = function(){
    ximen.layoutTo(arrEle[0] + x,arrEle[1] + x,a[10],arrEle[2] + x,arrEle[3] + x);
    ximen.isIn = a[11];
    };
    })(n + 1);
    };
    for(var i=0;i<lisLen;i++) {
    (function(j) {
    lis[j].onmouseover = function(){
    if(ximen.isIn == 0) {      //如果面板还没有钉入，下同
    if(parseInt(ximen.$(ximen.ini[3] + (j + 1)).style.left) < ximen.ini[0]) {
    for(var k=0;k<lisLen;k++) {
    ximen.$(ximen.ini[3] + (k + 1)).style.zIndex = 4;
    ximen.$(ximen.ini[3] + (k + 1)).style.left = ximen.ini[2];
    clearInterval(ximen.$(ximen.ini[3] + (k + 1)).aWhile);
    ximen.$(ximen.ini[3] + (k + 1)).style.display = ximen.ini[5];
    ximen.$(ximen.ini[15] + (k + 1)).style.display = ximen.ini[5];
    ximen.$(ximen.ini[15] + (k + 1)).style.zIndex = 2;
    lis[k].className = '';
    }
    ximen.$(ximen.ini[3] + (j + 1)).style.zIndex = 5;
    ximen.layoutFO(ximen.ini[3] + (j + 1),'open');
    ximen.$(ximen.ini[3] + (j + 1)).style.display = ximen.ini[6];
    ximen.$(ximen.ini[15] + (j + 1)).style.display = ximen.ini[6];
    ximen.$(ximen.ini[15] + (j + 1)).style.zIndex = 3;
    this.className = ximen.ini[12];
    }
    }
    else {
    for(var k=0;k<lisLen;k++) {
    toset(k,arr1);
    lis[k].className = '';
    }
    toset(j,arr2);
    this.className = ximen.ini[12];
    }
    }
    })(i);
    ximen.drag(ximen.$(ximen.ini[3] + (i + 1)),arrEle[1] + (i + 1),ximen.ini[26],ximen.ini[27]);
    }
    }
    ximen.setLayout = function() {
    var layout_header = ximen.$(ximen.ini[23]),
    layout_content = ximen.$(ximen.ini[24]),
    layout_footer = ximen.$(ximen.ini[25]),
    toolsContent1 = ximen.$(ximen.ini[3] + 1),
    toolsContent2 = ximen.$(ximen.ini[3] + 2),
    toolsContent3 = ximen.$(ximen.ini[3] + 3),
    setHeight = function() {
    var newHeight = document.documentElement.clientHeight - layout_header.offsetHeight - layout_footer.offsetHeight;
    layout_content.style.height = newHeight + 'px';
    toolsContent1.style.height = toolsContent2.style.height = toolsContent3.style.height = newHeight - 1 + "px";
    ximen.getChild(toolsContent1,'last').style.height = ximen.getChild(toolsContent2,'last').style.height = ximen.getChild(toolsContent3,'last').style.height = newHeight - ximen.ini[22] - 1 + "px";
    };
    setHeight();
    ximen.setTags();
    window.onresize = setHeight;
    }
    window.onload = function() { ximen.setLayout(); }
    </script>
    </head>
    <body>
    <div id="layout_header">
    <h1>某某某管理平台</h1>
    </div>
    <div id="layout_content">
    <ul id="toolsTags" class="toolsTags">
    <li class="now">检索目录一</li>
    <li>检索目录二</li>
    <li>检索目录三</li>
    </ul>
    <div id="toolsContent1" class="toolsContent" style="left:20px;">
    <div class="toolsBar"></div>
    <div class="toolsTitle"><a href="#;" id="clickFold1" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent1','fold');">折回</a> <a href="#;" id="clickTo1" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent1','layoutInner1','in','clickTo1','clickFold1');">嵌入</a> 检索目录一</div>
    <div class="toolsC">
    <div class="toolsCin">
    <img src="/html/txdm_2/images/20101007/zzz_tree.png" />
    </div>
    </div>
    </div>
    <div id="toolsContent2" class="toolsContent" style="left:-302px;">
    <div class="toolsBar"></div>
    <div class="toolsTitle"><a href="#;" id="clickFold2" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent2','fold');">折回</a> <a href="#;" id="clickTo2" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent2','layoutInner2','in','clickTo2','clickFold2');">嵌入</a> 检索目录二</div>
    <div class="toolsC">
    <div class="toolsCin">
    <img src="/html/txdm_2/images/20101007/zzz_tree.png" />
    </div>
    </div>
    </div>
    <div id="toolsContent3" class="toolsContent" style="left:-302px;">
    <div class="toolsBar"></div>
    <div class="toolsTitle"><a href="#;" id="clickFold3" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent3','fold');">折回</a> <a href="#;" id="clickTo3" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent3','layoutInner3','in','clickTo3','clickFold3');">嵌入</a> 检索目录三</div>
    <div class="toolsC">
    <div class="toolsCin">
    <img src="/html/txdm_2/images/20101007/zzz_tree.png" />
    </div>
    </div>
    </div>
    <div id="layoutInner1" class="layoutInner">
    <table style="width:100%;">
    <tr>
    <td>11111111</td>
    <td>11111111</td>
    <td>11111111</td>
    <td>
    <div style="width:50%; padding:10px; border:1px dashed #333; text-align:left; background:#eee;">
    <h2>仿Visual Studio面板 beta</h2>
    <ol style="padding:10px 10px 10px 20px;">
    <li>支持鼠标拖拽面板右侧改变面板宽度</li>
    <li>限制面板最小宽度和最大宽度</li>
    <li>点面板右上角按钮实现“嵌入”、“浮起”、“折回”功能</li>
    <li>面板“浮起”时，tag切换面板动态折回与展开</li>
    <li>面板“嵌入”时，面板嵌入页面中，tag区落到下方</li>
    </ol>
    </div>
    </td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td> </td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td> </td>
    </tr>
    </table>
    </div>
    <div id="layoutInner2" class="layoutInner">
    <table style="width:100%;">
    <tr>
    <td>222222</td>
    <td>222222</td>
    <td>222222</td>
    <td>222222</td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    </tr>
    </table>
    </div>
    <div id="layoutInner3" class="layoutInner">
    <table style="width:100%;">
    <tr>
    <td>333333</td>
    <td>333333</td>
    <td>333333</td>
    <td>333333</td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    </tr>
    <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    </tr>
    </table>
    </div>
    </div>
    <div id="layout_footer">
    </div>
    </body>
    </html>