后台管理自适应布局，使用IFrame布局常用后台管理页面

最新推荐文章于 2024-07-08 13:31:13 发布

一人一旧城

最新推荐文章于 2024-07-08 13:31:13 发布

阅读量2k

点赞数 2

分类专栏： JQuery JavaScript HTML+CSS

本文链接：https://blog.csdn.net/u012725119/article/details/101783594

版权

JavaScript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

JQuery

2 篇文章 0 订阅

订阅专栏

HTML+CSS

1 篇文章 0 订阅

订阅专栏

只需要一行代码即可实现头部、中间部分(左边固定，右边自适应)、底部，包含根据json 自动加载菜单。布局大小根据可见宽高自动变化，可自己更改样式，灵活多变。可搜索菜单，并打开菜单。功能非常多，全是源码，内容都可自己修改，还是18年写的，上传在好例子网，最近收到邮件才记起来。

先看看效果吧

代码也比较简单，一个JSON 和一行JS 代码，HTML不变就好。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link href="iconfont/iconfont.css" rel="stylesheet" />
    <link href="css/layout.css" rel="stylesheet" />
    <link href="css/contextmenu.css" rel="stylesheet" />
    <script src="js/contextmenu.js"></script>
    <script src="js/datajson.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            outline: 0px;
            text-decoration: none;
            color: #606060;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
        }
    </style>
    <script>
        $(function () {

            $(".layout").layout(json,"frame1.html");//关键代码
        })
    </script>

</head>
<body>
    <div class="layout">
        <!--头部 start-->
        <div class="layout-top">
            <div class="layout-top-left" style="height:100%;">洛芙莱斯科技有限公司</div>
        </div>
        <!--头部 end-->
        <!--底部 start -->
        <div class="layout-bottom">Copyright © 洛芙莱斯(Lovelace)(LoveNice)科技有限公司版权所有</div>
        <!--底部 end-->
    </div>
</body>
</html>

由于文件比较多，我就上传到下载资源里面去了，大家可以去下载，等审核通过后再贴地址

https://download.csdn.net/download/u012725119/11830825

一人一旧城

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
后台管理自适应布局，使用IFrame布局常用后台管理页面

只需要一行代码即可实现头部、中间部分(左边固定，右边自适应)、底部，包含根据json 自动加载菜单。布局大小根据可见宽高自动变化，可自己更改样式，灵活多变。可搜索菜单，并打开菜单。功能非常多，全是源码，内容都可自己修改，还是18年写的，上传在好例子网，最近收到邮件才记起来。先看看效果吧代码也比较简单，一个JSON 和一行JS 代码，HTML不变就好。<!DOCTYPE h...
复制链接

扫一扫

专栏目录