layui后台管理页面 首页简单搭建

最新推荐文章于 2024-05-24 23:39:00 发布
最新推荐文章于 2024-05-24 23:39:00 发布
阅读量5.2k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGDmar/article/details/85097485
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layui后台管理页面</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>
<body>
    <div class="layui-layout-admin">
        <!--头部-->
        <div class="layui-header">
            <div class="layui-logo">Huang BaoKang</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
                <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其他系统</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">邮件管理</a></dd>
                        <dd><a href="javascript:;">消息管理</a></dd>
                        <dd><a href="javascript:;">授权管理</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href=""><img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">Huang BaoKang</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <!--左侧-->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
                    <li class="layui-nav-item">
                        <a href="javascript:;">基本元素</a>
                        <dl class="layui-nav-child">
                            <dd lay-id="111"><a href="javascript:;" data-options="{url:'test.html',title:'表格'}">表格</a></dd>
                            <dd><a href="">表单</a></dd>
                            <dd><a href="">导航栏</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="">组件</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">Navbar</a></dd>
                            <dd><a href="">Tab</a></dd>
                            <dd><a href="">OneLevel</a></dd>
                            <dd><a href="">app.js主入口</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="">表格</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="">表单</a>
                    </li>
                </ul>
            </div>
        </div>

        <!--中间主体-->
        <div class="layui-body" id="container">
            <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this">首页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">首页内容</div>
                </div>
            </div>
        </div>

        <!--底部-->
        <div class="layui-footer">
            <center>产品版权</center>
        </div>
    </div>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        element.on('nav(hbkNavbar)',function(elem){
            /*使用DOM操作获取超链接的自定义data属性值*/
            var options = eval('('+elem.context.children[0].dataset.options+')');
            var url = options.url;
            var title = options.title;
            element.tabAdd('tabs',{
                title : title,
                content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',
                id : '111'
            });
        });
        /*使用下面的方式需要引用jquery*/
       /* $('.layui-nav-child a').click(function () {
            var options = eval('('+$(this).data('options')+')');
            var url = options.url;
            var title = options.title;
            element.tabAdd('tabs',{
                title : title,
                content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'
            });
        });*/
    });
</script>
</body>
</html>

 

LGDmar
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）五：后台主页功能实现上
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
07-25 570
本章实现后台主页框架实现、菜单的动态加载及生产、tab组件与菜单绑定、菜单与路由绑定等，工具栏按钮等界面及对应功能实现。
layui下的登录页首页
04-28
使用layui框架，登录页，菜单页和首页，自动生成菜单（三级），首页自动生成echart图（饼状图，柱状图和折线出），自动弹出公告框
使用Layui搭建后台管理界面
热门推荐
huangbaokang的博客
08-05 6万+
Layui是一个样式比较丰富艳丽的UI框架，通过自学了相关api文档，自己手工搭建了一个后台管理页面。页面布局是常用的一套，上面是一个logo，左边区域是一个导航，中间是内容tab页，底部是版权信息，好了，看代码吧！<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quot
layui自定义admin页面简单实现-练手
最新发布
孔的博客
05-24 318
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <title>管理界面</title> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt
layui 搭建页面
羽下佳人的博客
07-04 7247
实现需求： 1.tab页切换 2.详情：弹出弹层，仅展示内容，不能编辑 3.更新：切换到案件录入数据填入，实现部分内容的编辑 4.案件录入：点击实现新案件的创建 项目目录：https://github.com/zjl9339/web/tree/layui 一.首页搭建 1.index.html <!DOCTYPE html> <html> <he...
layui搭建管理后台系统
weixin_43811651的博客
07-23 1万+
先上最终效果图： 点击左侧的菜单树可以显示在导航栏中 下面是具体步骤： ①下载layui https://www.layui.com/ ②项目结构介绍 html：存放静态界面 img：存放图片 json：模拟请求数据，展示用 layui：步骤一下载的文件 ③源码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
layui制作母版+首页
运维@小兵的博客
02-12 1932
母板base.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>运维管理系统</title> <link rel="stylesheet" href="/
layui基础--实现简单图书管理页面
weixin_52173610的博客
08-31 969
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。
layui后台管理系统模板
06-17
总的来说，layui后台管理系统模板是一个完整的后台开发解决方案，结合layui的强大功能，可以快速搭建出美观且功能齐全的后台管理界面。无论是新手还是经验丰富的开发者，都能从中受益，提升开发效率，打造出满足需求...
xadmin模板基于layui搭建后台管理系统
07-24
"xadmin模板基于layui搭建后台管理系统"正是这样一种解决方案，它结合了xadmin的强大功能和layui的优雅设计，为开发者提供了一个便捷、易用的管理平台构建框架。 xadmin是一个基于Django框架的后台管理系统，它提供...
自己做的layui的管理后台源代码
04-09
这个"layui的管理后台源代码"项目是基于layui构建的一个后台管理系统的基础框架，旨在帮助开发者快速搭建后台界面，节省开发时间。 在layui的基础上，这个管理后台源代码可能包含以下几个关键知识点： 1. **layui...
基于Layui的后台管理前端模板layuimini设计源码
04-23
本项目是基于Layui开发的后台管理前端模板layuimini设计源码，包含211个文件，其中包括75个GIF图片，37个JavaScript文件，25个HTML页面，14个CSS样式文件，14个LESS样式文件，14个SCSS样式文件，6个JSON配置文件，5个PNG图片，3个WOFF字体文件，2个JPG图片。layuimini是一个简洁、易用的后台框架模板，只需要提供一个接口就可以直接初始化整个框架，无需复杂操作。该模板适合用于构建后台管理系统，帮助开发者快速搭建功能齐全、易于维护的后台界面。
layui后台管理模板-iframe版.rar
03-11
layui后台管理模板-iframe版.rar 是一个基于layui框架的后台管理系统模板，专为开发者提供离线使用的iframe版本。layui是一款轻量级的前端组件库，以其简洁、高效的特性深受开发者喜爱。这个模板采用HTML5技术，确保...
layui后台管理模板
04-11
总的来说，“layui后台管理模板”是基于layui框架构建的，包含了大量常见的后台管理页面和组件，为开发人员提供了一个起点，帮助他们快速搭建起具备基本功能的后台系统。通过学习和使用这个模板，开发者不仅可以掌握...
基于Layui实现管理页面
DengShuo_shuai的博客
06-29 2292
注：这是博主在帮朋友实现的一个简单的系统前端框架（无后端），跟大家分享出来，可以直接将对应菜单跟html文件链接起来，页面使用标签页方式存在，使用简单，整体布局轻便简介，可根据自己需求进行拓展，代码包在文章末尾Layui介绍地址：https://layui.dev/docs/2.8/图示例： home.html: home.js 使用示例： 对应a标签加上属性 data-url ，设置为对应页面的相对路径，即可实现自动跳转。（主页已经固定为home.html，不需要额外的页面）
使用layui框架的信息管理页面
qq_53843555的博客
06-19 1536
使用layui框架的信息管理页面（前后端代码实现）
layui实现后台管理系统界面(亲测可用)
lishuaihao的博客
08-14 4795
需要根据自己的项目，对下面代码中注释了TODO的地方进行修改。（当然，至于其他js/css文件也需要具体情况具体修改）（下面的代码只是管理界面的架子，不包含右边的页面主体区域。使用的是最新的layui2.5.6。......
layui后台管理首页配置
abksio的博客
06-24 2295
layui后台管理首页配置 项目SSM整合，参考我之前的笔记视频 layui后台管理首页配置 导入layui index.html <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"
Layui网页模板
qq_53374893的博客
07-30 1431
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>会员管理</title> <link href="layui/css/layui.css" rel="sty
layui后台管理模版
07-19
### 回答1： layui后台管理模版是一套基于layui框架开发的后台管理系统模板，它提供了丰富的UI组件和功能，使得开发者能够快速构建出美观、易于使用和功能完善的后台管理系统。 首先，layui后台管理模版具有丰富的UI组件，包括常见的表格、表单、按钮、导航栏等，这些组件具有统一的风格和交互效果，使得后台管理系统具有统一的界面风格，给用户一致的使用体验。 其次，layui后台管理模版还提供了大量的扩展模块，如日期选择器、上传组件、富文本编辑器等，这些扩展模块可以满足不同项目的需求，开发者可以根据实际情况选择使用。 此外，layui后台管理模版还支持数据表格的展示与操作，开发者可以通过设置表格的列数、设置表格的样式以及添加分页组件等来实现数据的展示和操作，方便了数据的管理和查看。 另外，layui后台管理模版提供了丰富的页面模板，包括登录页、主页、用户管理、权限管理等，这些页面模板具有良好的结构和布局，能够提高开发效率，减少代码的编写量。 总的来说，layui后台管理模版是一套功能强大、易于使用的后台管理系统模板，它提供了丰富的UI组件和功能，能够帮助开发者快速搭建出美观、易于使用和功能完善的后台管理系统。无论是初学者还是有经验的开发者都可以轻松上手并快速完成项目开发。 ### 回答2： Layui后台管理模板是一款基于Layui框架开发的可用于快速搭建后台管理系统的模板。它提供了一系列的UI组件和功能，让开发者能够方便地构建出美观、简洁、易用的后台管理界面。 该模板包含了常见的后台管理系统所需要的功能模块，如主页、用户管理、权限管理、数据统计等。这些功能模块都经过精心设计，符合用户的使用习惯，且具备较好的扩展性和定制性，可以方便地根据实际需求添加或修改功能。 在样式方面，Layui后台管理模板采用了简洁清晰的设计风格，配色协调，界面优雅美观。页面布局灵活，支持响应式布局，能够适应各种屏幕尺寸，用户可以在不同设备上流畅地使用系统。 在交互方面，该模板使用了Layui框架提供的丰富的交互组件，如菜单栏、表格、表单等，使得用户可以方便地进行操作和数据管理。同时，该模板还支持按需加载，可以提高页面加载速度，提升用户体验。 总之，Layui后台管理模板是一款功能强大、易于使用的后台管理系统模板，它具备美观的设计、灵活的布局和丰富的交互功能，帮助开发者能够快速搭建出符合用户需求的后台管理系统。无论是个人项目还是企业级应用，都可以选择Layui后台管理模板来提高开发效率和用户体验。 ### 回答3： layui后台管理模版是一款基于layui框架开发的后台管理系统模板。该模板具有简洁、美观、易用的特点，适合用于各种类型的后台管理系统。 首先，layui后台管理模版提供了多个常用的后台管理系统页面模板，如登录页面、主页面、表单页面、数据列表页面等。这些页面模板已经经过精心设计和开发，用户可以直接使用或进行二次开发，大大节省了开发者的时间和精力。 其次，layui后台管理模版提供了丰富的功能组件，如弹框、菜单、表格、分页等。这些功能组件基于layui框架的特性，具有稳定性和可靠性，并且具有良好的兼容性，能够在不同的浏览器和设备上正常运行。 此外，layui后台管理模版还支持响应式布局，能够适应不同尺寸的屏幕，使得后台管理系统在不同设备上都能够正常展示和操作。 最后，layui后台管理模版还提供了丰富的主题样式，用户可以根据自己的需求选择合适的主题样式，使得后台管理系统有更好的视觉效果。 综上所述，layui后台管理模版是一款功能丰富、易用性强的后台管理系统模板，可以满足各种类型的后台管理系统的需求。无论是初次接触后台开发的新手，还是有一定开发经验的开发者，都能够通过layui后台管理模版快速搭建出高质量的后台管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值