2022-03-12 网页Layout

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Layout</title>
    <link rel="stylesheet" href="./plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="./plugins/jquery-3.6.0/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./a.css">
    <script src="./a.js"></script>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        html,
        body,
        .layout {
            height: 100%;
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: Tahoma, Verdana, "Microsoft Yahei";
        }
        
        #layout-navbar {
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            z-index: 1000;
            position: absolute;
            background-color: aliceblue;
        }
        
        #layout-main {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 0;
            padding: 10px;
            padding-top: 50px;
            background-color: beige;
        }
        
        .layout-sidebar {
            position: absolute;
            display: inline-block;
            top: 0;
            height: 100%;
            z-index: 500;
            outline: none;
        }
        
        #layout-sidebar-left {
            left: 0;
        }
        
        #layout-sidebar-right {
            right: 0;
        }
        
        .layout-sidebar-panel {
            position: absolute;
            display: inline;
            width: 260px;
            height: 100%;
            padding-top: 50px;
        }
        
        .float-sidebar>.layout-sidebar-panel {
            box-shadow: 0px 0px 12px;
        }
        
        .fixed-sidebar>.layout-sidebar-panel {
            box-shadow: 0px 0px 2px;
        }
        
        #layout-sidebar-left>.layout-sidebar-panel {
            left: 0;
        }
        
        #layout-sidebar-right>.layout-sidebar-panel {
            right: 0;
        }
        
        .layout-siderbar-body {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .layout-sidebar-view {
            height: 100%;
            overflow: hidden;
            background-color: blanchedalmond;
        }
        
        .layout-sidebar-view>div {
            height: 100%;
        }
        
        .opend>.layout-siderbar-body>.layout-sidebar-view>div {
            overflow: auto;
        }
        
        .closed>.layout-siderbar-body>.layout-sidebar-view>div {
            overflow: hidden;
        }
        
        .layout-sidebar-button {
            position: absolute;
            display: inline;
            float: left;
            height: 56px;
            width: 12px;
            top: 0;
            border: 0;
            background-color: #a5a5a5;
            cursor: pointer;
            padding-top: 19px;
            padding-left: 3px;
            opacity: 0.5;
        }
        
        .layout-sidebar-button:hover {
            background-color: black;
            color: white;
            opacity: 1;
        }
        
        #layout-sidebar-left .layout-sidebar-button {
            right: -12px;
            border-radius: 0 5px 5px 0;
        }
        
        #layout-sidebar-right .layout-sidebar-button {
            left: -12px;
            border-radius: 5px 0 0 5px;
        }
        
        .layout-sidebar-button>i {
            font-size: 18px;
        }
        
        #layout-sidebar-left>.opend .fa-angle-right {
            display: none;
        }
        
        #layout-sidebar-left>.closed .fa-angle-left {
            display: none;
        }
        
        #layout-sidebar-right>.opend .fa-angle-left {
            display: none;
        }
        
        #layout-sidebar-right>.closed .fa-angle-right {
            display: none;
        }
        
        #layout-main-tabcard {
            position: relative;
            top: 0px;
            width: 100%;
            height: 36px;
            padding-left: 40px;
            line-height: 36px;
            border-bottom: 1px solid gray;
            z-index: 100;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
        }
        
        #layout-main-tabcard>.scrollbar {
            position: absolute;
            left: 0px;
            width: 40px;
            height: 35px;
        }
        
        #layout-main-tabcard>.scrollbar>.scroll-button {
            display: inline;
            width: 20px;
            float: left;
            cursor: pointer;
            line-height: 35px;
        }
        
        #layout-main-tabcard>.scrollbar>.scroll-button>i {
            margin-left: 4px;
        }
        
        #layout-main-tabcard>.scrollbar>.scroll-button:hover {
            background-color: brown;
        }
        
        #layout-main-tabcard-tablist {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        
        #layout-main-tabcard-tablist div {
            position: relative;
            line-height: 35px;
            height: 35px;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: table-cell;
            white-space: nowrap;
            padding-left: 20px;
            padding-right: 20px;
            border-right: 1px solid #505050;
        }
        
        #layout-main-tabcard-tablist div:hover {
            background-color: #909090;
        }
        
        #layout-main-tabcard-tablist div:hover>i {
            display: inherit;
        }
        
        #layout-main-tabcard-tablist div[class="active"] {
            background-color: #505050;
            color: white;
        }
        
        #layout-main-tabcard-tablist div[class="normal"] {
            background-color: #a5a5a5;
            cursor: pointer;
        }
        
        #layout-main-tabcard-tablist i {
            position: absolute;
            top: 2px;
            right: 3px;
            margin-left: 5px;
            white-space: nowrap;
            cursor: pointer;
            display: none;
        }
        
        #layout-main-tabcard-tablist i:hover {
            color: red;
            display: block;
        }
        
        .layout-main-view {
            position: relative;
            top: -36px;
            width: 100%;
            height: 100%;
            padding-top: 36px;
        }
        
        #layout-main-view {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="layout">
        <div id="layout-navbar"></div>
        <div id="layout-main" style="padding-top: 50px;">
            <div id="layout-main-tabcard">
                <div class="scrollbar">
                    <div id="layout-main-tabcard-scroll-left" class="scroll-button"><i class="fa fa-chevron-left" aria-hidden="true"></i>
                    </div>
                    <div id="layout-main-tabcard-scroll-right" class="scroll-button"><i class="fa fa-chevron-right" aria-hidden="true"></i>
                    </div>
                </div>
                <div id="layout-main-tabcard-tablist">
                    <div class="active">index1.html<i class="fa fa-times"></i></div>
                    <div class="normal">index2.html<i class="fa fa-times"></i></div>

                    <div class="normal">index3.html<i class="fa fa-times"></i></div>
                    <div class="normal">index12313.html<i class="fa fa-times"></i></div>
                    <div class="normal">layout-tabcard.html<i class="fa fa-times"></i></div>
                    <div class="normal">中华人民共和国浙江省杭州市滨江区滨安路1199号浙江大华技术股份有限公司.html<i class="fa fa-times"></i></div>
                    <div class="normal">index.html<i class="fa fa-times"></i></div>
                    <div class="normal">index.html<i class="fa fa-times"></i></div>
                    <div class="normal">index.html<i class="fa fa-times"></i></div>
                    <div class="normal">index.html<i class="fa fa-times"></i></div>
                    <div class="normal">index.html<i class="fa fa-times"></i></div>

                </div>
            </div>
            <div class="layout-main-view">
                <div id="layout-main-view">0000</div>
            </div>
        </div>
        <div id="layout-sidebar-left" class="layout-sidebar fixed-sidebar" tabindex="-1">
            <div class="layout-sidebar-panel opend">
                <div class="layout-siderbar-body">
                    <div id="layout-sidebar-left-view" class="layout-sidebar-view">
                        <div>
                            <!-- 这里就是按需进行填充，作为左侧边栏的内容 begin -->
                            <div class="title">我的</div>
                            <ul class="group">
                                <li>设备#1
                                    <ul>
                                        <li>视频预览</li>
                                        <li>应用中心</li>
                                        <li>系统设置</li>
                                        <li>实施日志</li>
                                    </ul>
                                </li>
                                <li class="active">设备#2
                                    <ul>
                                        <li>视频预览</li>
                                        <li>应用中心</li>
                                        <li>系统设置</li>
                                        <li>实施日志</li>
                                    </ul>
                                </li>
                                <li class="normal">设备#3
                                    <ul>
                                        <li>视频预览</li>
                                        <li>应用中心</li>
                                        <li>系统设置</li>
                                        <li>实施日志</li>
                                    </ul>
                                </li>
                                <li class="normal">设备#4
                                    <ul>
                                        <li>视频预览</li>
                                        <li>应用中心</li>
                                        <li>系统设置</li>
                                        <li>实施日志</li>
                                    </ul>
                                </li>
                            </ul>
                            <!-- 这里就是按需进行填充，作为左侧边栏的内容 end -->
                        </div>
                    </div>
                    <div id="layout-sidebar-left-button" class="layout-sidebar-button">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
        <div id="layout-sidebar-right" class="layout-sidebar float-sidebar" tabindex="-1">
            <div class="layout-sidebar-panel opend">
                <div class="layout-siderbar-body">
                    <div id="layout-sidebar-right-view" class="layout-sidebar-view">
                        <div>
                            <!-- 这里就是按需进行填充，作为右侧边栏的内容 begin -->
                            <div>
                                <p>阿达地方阿达地方阿达地方阿达地方阿达地方阿达地</p>
                                <p>阿达地方阿达地方阿达地方阿达地方阿达地方阿达地</p>
                            </div>
                            <!-- 这里就是按需进行填充，作为右侧边栏的内容 end -->
                        </div>
                    </div>
                    <div id="layout-sidebar-right-button" class="layout-sidebar-button">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function layout_replaceClass(e, oldClass, newClass) {
        if (e != null) {
            var i = 0;
            var className = e.className.split(" ");
            var strClass = "";
            for (i = 0; i < className.length; i++) {
                if (className[i] != oldClass && className[i] != newClass) {
                    strClass += (className[i] + " ");
                }
            }
            e.className = strClass += newClass;
        }
    }

    function layout_all() {
        var items = {
            navbar: null,
            main: null,
            left: {
                bar: null,
                view: null,
                panel: null,
                button: null,
                status: null,
                style: null,
            },
            right: {
                bar: null,
                view: null,
                panel: null,
                button: null,
                status: null,
                style: null,
            },
        };

        items.navbar = document.getElementById("layout-navbar");
        items.main = document.getElementById("layout-main");

        items.left.bar = document.getElementById("layout-sidebar-left");
        items.left.view = document.getElementById("layout-sidebar-left-view");
        items.left.panel = items.left.bar.children[0];
        items.left.button = document.getElementById("layout-sidebar-left-button");
        if (items.left.panel.className.search("opend") >= 0) {
            items.left.status = "opend";
        }
        if (items.left.panel.className.search("closed") >= 0) {
            items.left.status = "closed";
        }
        if (items.left.bar.className.search("fixed-sidebar") >= 0) {
            items.left.style = "fixed";
        }
        if (items.left.bar.className.search("float-sidebar") >= 0) {
            items.left.style = "float";
        }

        items.right.bar = document.getElementById("layout-sidebar-right");
        items.right.view = document.getElementById("layout-sidebar-right-view");
        items.right.panel = items.right.bar.children[0];
        items.right.button = document.getElementById("layout-sidebar-right-button");
        if (items.right.panel.className.search("opend") >= 0) {
            items.right.status = "opend";
        }
        if (items.right.panel.className.search("closed") >= 0) {
            items.right.status = "closed";
        }
        if (items.right.bar.className.search("fixed-sidebar") >= 0) {
            items.right.style = "fixed";
        }
        if (items.right.bar.className.search("float-sidebar") >= 0) {
            items.right.style = "float";
        }

        return items;
    }

    function layout_sidebar_collpase(bar) {
        var style = bar.style;
        if (bar.status == "closed") {
            return false;
        }
        layout_replaceClass(bar.panel, "opend", "closed");
        $(bar.panel).animate({
            width: '0px'
        });
        if (style == "fixed") {
            $("#layout-main").animate({
                paddingLeft: '10px'
            });
        }

    }

    function layout_sidebar_expand(bar) {
        var style = bar.style;
        if (bar.status == "opend") {
            return false;
        }
        $(bar.panel).animate({
            width: '260px'
        }, function() {
            layout_replaceClass(bar.panel, "closed", "opend");
        });
        if (style == "fixed") {
            $("#layout-main").animate({
                paddingLeft: '270px'
            });
        }
    }

    function layout_sidebar_toggle(which) {
        var layout = layout_all();
        if (which == "left") {
            if (layout.left.status == "closed") {
                layout_sidebar_expand(layout.left);
            } else {
                layout_sidebar_collpase(layout.left);
            }
        }
        if (which == "right") {
            if (layout.right.status == "closed") {
                layout_sidebar_expand(layout.right);
            } else {
                layout_sidebar_collpase(layout.right);
            }
        }
    }
    document.body.onload = function() {
        var i = 0;
        var layout = layout_all();

        // 左侧边栏展开按钮点击
        layout.left.button.onclick = function() {
            layout_sidebar_toggle("left");
        };

        // 右侧边栏展开按钮点击
        layout.right.button.onclick = function() {
            layout_sidebar_toggle("right");
        };

        // 左侧边栏，如果是float模式，这会在失焦时自动折叠起来
        layout.left.bar.onblur = function() {
            var e = layout_all();
            if (e.left.style == "float") {
                layout_sidebar_collpase(layout.left);
            }
        };

        // 右侧边栏，如果是float模式，这会在失焦时自动折叠起来
        layout.right.bar.onblur = function() {
            var e = layout_all();
            if (e.right.style == "float") {
                layout_sidebar_collpase(layout.right);
            }
        };

        // 鼠标点击左右调整按钮，实现选项卡左右移动
        tablist = document.getElementById("layout-main-tabcard-tablist");
        document.getElementById("layout-main-tabcard-scroll-left").onclick = function() {
            tablist.scrollLeft -= 30;
            console.log(tablist.scrollLeft);
        };
        document.getElementById("layout-main-tabcard-scroll-right").onclick = function() {
            tablist.scrollLeft += 30;
            console.log(tablist.scrollLeft);
        };

        // 支持鼠标滚轮事件，实现选项卡左右移动
        $("#layout-main-tabcard").bind("mousewheel", function(event) {
            console.log(event.originalEvent.wheelDelta);
            if (event.originalEvent.wheelDelta < 0) {
                tablist.scrollLeft += 30;
            }
            if (event.originalEvent.wheelDelta > 0) {
                tablist.scrollLeft -= 30;
            }
            if (event.originalEvent.detail < 0) {
                tablist.scrollLeft += 30;
            }
            if (event.originalEvent.detail > 0) {
                tablist.scrollLeft -= 30;
            }
        });

        // 支持鼠标点击每个选项卡，用于切换选中
        for (i = 0; i < tablist.children.length; i++) {
            tablist.children[i].onclick = function() {
                if (this.className != "active") {
                    var j = 0;
                    for (j = 0; j < this.parentElement.children.length; j++) {
                        this.parentElement.children[j].className = "normal";
                    }
                    this.className = "active";
                }
            }
        }

        // 初始状态设置
        if (layout.left.style == "fixed") {
            layout.main.style.paddingLeft = ($(layout.left.panel).width() + 10) + 'px';
        } else {
            layout_sidebar_collpase(layout.left);
        }

        if (layout.right.style == "fixed") {
            layout.main.style.paddingRight = ($(layout.right.panel).width() + 10) + 'px';
        } else {
            layout_sidebar_collpase(layout.right);
        }

        rightbar_init();
    }
</script>

</html>


function rightbar_init() {
    var bar = document.getElementById("layout-sidebar-left-view");
    var li = bar.children[0].children[1].children;
    var i = 0;
    for (i = 0; i < li.length; i++) {
        li[i].onclick = function() {
            rightbar_expand(this);
        }
    }
}

function rightbar_expand(e) {
    var li = e.parentElement.children;
    var i = 0;
    if (e.className == 'active') {
        return;
    }
    for (i = 0; i < li.length; i++) {
        if (li[i].className == 'active') {
            li[i].className = "";
            li[i].children[0].className = "";
            $(li[i].children[0]).slideUp(500);
            break;
        }
    }
    e.className = "active";
    $(e.children[0]).slideDown(500, function() {
        this.className = "active";
    });
}


.title {
    font-weight: bold;
    font-size: 16px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.group {
    list-style: none;
    margin: 0;
    padding-inline-start: 0px;
    line-height: 42px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.group li {
    background-color: cornflowerblue;
    text-indent: 10px;
    cursor: pointer;
}

.group>li:hover {
    background-color: rgb(74, 131, 236);
}

ul[class="active"]>li:hover {
    background-color: rgb(74, 131, 236);
}

.group li[class="active"] {
    background-color: rgb(74, 131, 236);
}

.group li>ul {
    list-style: none;
    padding-left: 10px;
    display: none;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容