程序员经验分享-hwhale

LayUI中的基本元素之面板

2023-11-18

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

面板

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

常规面板
<div class="layui-row layui-col-space15">
  <div class="layui-col-md6">
    <div class="layui-panel">
      <div style="padding: 30px;">一个面板</div>
    </div>   
  </div>
  <div class="layui-col-md6">
    <div class="layui-panel">
      <div style="padding: 30px;">一个面板</div>
    </div>   
  </div>
</div>
卡片面板
<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

折叠面板
<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
 
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
开启手风琴 lay-accordion

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <!-- 引入LayUId的核心CSS-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

    <div style="height: 50px">卡片面板</div>
    <div class="layui-card layui-bg-red">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body" >
            卡片式面板面板通常用于非白色背景色的主体内<br>
            从而映衬出边框投影
        </div>
    </div>

    <div style="height: 50px">折叠面板</div>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">杜甫</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">李清照</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">鲁迅</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
    </div>
    <div style="height: 50px">手风琴</div>
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">杜甫</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">李清照</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">鲁迅</h2>
            <div class="layui-colla-content layui-show">内容区域</div>
        </div>
    </div>

    <script>
        //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        layui.use('element', function(){
            var element = layui.element;
        });
    </script>
</body>
</html>

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

layui

LayUI中的基本元素之面板 的相关文章

  • layui表格隐藏列的简单实现方法

    需求 渲染表格的时候 比如id在内的一些列是不需要展示给用户看的 但是在操作表格的时候还需要用得到 这就需要隐藏列 的功能 实现效果 页面上不显示 但是能获取到id的值 实现方法 table render id id 可以在这里设置需要隐藏

  • layui分页遇到的问题及button和input的区别

    参考文献 漂亮分页样式和代码 http layui shagua wiki layuidoc demo laypage html 按钮input和代码 http www shagua wiki project 3 p 84

  • Layui项目实战

    使用语言 C Js Html 使用框架 MVC Layui 使用插件 JQuery Layui 一 Layui父窗体前端代码 1 Html代码 div class layui col md12 style padding 8px div c

  • layui的layer弹出层和form表单

    参考文献 含代码 http www shagua wiki project 3 p 113

  • layui 手风琴折叠

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div

  • layui显示表格数据的id的两种形式

    1 获取数据库表字段id field id title 用户ID width 100 fixed left align center templet function d return d id 2 templet属性获得id为 title

  • js实现字母序号自动递增

    在实现一个考试管理系统的时候 可能会遇到试题的选项不是固定的情况 需要灵活的增加选项 选项自动递增 A B C D F 通过Unicode编码的方式可以灵活实现 本案例是基于layui表格实现的 如果是其他形式 可以修改部分代码 首先获取到

  • LayUI之CRUD(增删改查)

    目录 前言 一 前端静态模板 二 用户管理后台代码 查看表 MySQL数据库 表结构 实体类 Dao方法 UserDao 查询 增加 删除 修改 测试后台dao方法 Junit UserDaoTest 查询 增加 修改 删除 web 三 用

  • springboot实战---记账本项目

    项目放在了服务器上 点我访问项目 root权限账号密码 root root 普通用户账号密码 user 123456 登陆界面预览 主页面预览 只做了一个页面的增删改查 使用springboot mybatis shiro layui 我使

  • layui添加菜单和动态操作tab

    layui添加菜单和动态操作tab 代码一 使用模板引擎渲染菜单 代码二修改版 代码一 使用模板引擎渲染菜单

  • ThinkPHP6.0 多应用模式 部署 Layuiadmin 单页版

    QQ 23426945 PHP技术群 159789818 个人技术博客 https www itqaq com TP6 0中的路由省略应用名只能用入口文件绑定应用 和 域名绑定应用 经过测试 最后得出域名绑定应用是最合适的部署方式 如果有更

  • LayUI图片上传接口

    前端样式 div class layui upload drag i class layui icon xe67c i p 点击上传 或将文件拖拽到此处 p div js var uploadInst upload render elem

  • layui时间选择器---去除秒列

    layui时间选择器 去除秒列 前言 layui开发文档中介绍的时间选择器包含了时 分 秒的选择 在实际开发过程中 我们选择时间可能不需要精确到秒 原始结构 1 HTML页面引入layui js文件 2 HTML文件中添加如下代码 3 在j

  • 使用layui/layuiAdmin的总结

    layui是一个前端UI框架 主要是配合JQuery使用 开始使用 首先是下载文件 然后引入css和js文件 引入之后就需要在

  • ruoyi框架时间范围range增加今日，近7日，近30日时间选择

    原先layui时间控件是不支持今日 近7日 近30日选择的 网上的解决方法是直接在引用的js中修改代码 这是一种方法 但是对于不能修改源代码的童鞋来说是不行的 所以一下解决方法诞生了 直接添加这三个按钮并和时间控件 laydate 有友好的

  • 初识Layui——Layui的使用

    目录 1 获取layui 2 开始使用 3 定义layui模块 4 使用layui模块 5 建立入口文件 1 获取layui 1 去官网首页下载 layui已停止维护 2 互联网搜索 目录结构如下 css css目录 modules 模块c

  • 基于SSM 和 layui 的增删查改

    开发工具 IDEA 2021 WebStorm 2021 Mysql 8 0 开发环境 JDK 8 TomCat 8 5 81 apache maven 3 6 1 技术点 Spring SpringMVC Mybatis Mysql Ht

  • layui与flask模板语言{{}}冲突的最佳方案

    使用 Jinja2的 raw 和 endraw 标签把 JavaScript 模板部分标记出来即可 raw endraw 但这是就需要注意区分项目中的 的值是jinja2还是layui

  • layui表格table不分页，显示全部数据

    layui表格table不分页 显示全部数据 表格渲染时添加两行代码 page false limit Number MAX VALUE 数据表格默认全部显示 table render elem orderTable id orderTab

  • layui表格table不分页，显示全部数据

    layui表格table不分页 显示全部数据 表格渲染时添加两行代码 page false limit Number MAX VALUE 数据表格默认全部显示 table render elem orderTable id orderTab

随机推荐

  • js-table2excel

    eslint disable let idTmr const getExplorer gt let explorer window navigator userAgent ie if explorer indexOf MSIE gt 0 r

  • 流程图中的实线_XMind如何在流程图中绘制实线箭头？XMind使用技巧

    如何利用xmind制作自己的思维导图 你好 建议你可以这样试试看 打开画图工具点击上方栏目 思维导图 在跳转专的页面点击 立即属体验 进入在线绘制界面 在画布的四周有很多的工具栏 这些在绘制的过程中都是可以使用的 首先 将中心主题进行确立

  • Java中StringBuffer类常用方法介绍

    StringBuffer类的介绍 StringBuffer是字符串缓存区 当new的时候是在堆内存创建了一个对象 底层是一个长度为16的 字符数组当调用添加的方法时 不会再重新创建对象 在不断向原缓冲区添加字符 查看字符串缓存区容量和长度

  • 快速傅氏变换之旅(一) 概念简介 3

    1 蝶形变换 普通的FFT算法称为基2的FFT算法 这种算法的核心是蝶形变换 长度为n 2 k1的变换共需要做 k1 n 2 次蝶形变换 如上图所示 若需变换数据表示为一个复数数组c 则每次蝶形变换有2个输入 c i c i s 两个输出

  • JS解密日记

    前言 JS混淆是通过改变JS代码的语法结构来使代码难以阅读和理解的技术 然而 请注意 混淆并不能真正保护您的代码 因为它仍然可以被解密和恢复其原始形式 直接上源代码 eval function p a c k e r e function

  • C11:mutex和lock_guard的使用.

    在C 11中 引入了有关线程的一系列库 且都在std命名空间内 下面演示一个使用线程的例子 非常的简单 引入了thread和mutex头文件 include

  • 攻防世界 inget

    打开网页提示 Please enter ID and Try to bypass 输入id绕过 尝试一下万能钥匙 尝试要不要符号闭合 http 61 147 171 105 49280 id 1 or 1 1 加个单引号成功 http 61

  • 【菜鸟C++学习杂记】ASCII码转换和显示

    笔者今年刚考上华东某高校的计算机研究生 本科虽是计算机学院 但期间主攻C 和Unity游戏开发 研究生属于小跨到计算机科学与技术 目前在进行硕导给的假期期间学习C 的任务 此类杂记主要记录下编码过程遇到的一些有趣的小知识 在某网课遇到了一个

  • 运用PL/SQL从1~100（包含边界）偶数之和

    1 第一种 方式实现 代码 set serveroutput on declare number integer 0 i integer 0 begin while i lt 100 loop number number i i i 2 e

  • 巴比特

    摘要 据 科创板日报 报道 当地时间5月9日 Meta宣布开源了一种可以横跨6种不同模态的全新AI模型ImageBind 包括视觉 图像和视频形式 温度 红外图像 文本 音频 深度信息 运动读数 由惯性测量单元或IMU产生 ImageBin

  • 为什么需要进程间通信？？

    进程是一个独立的资源分配单元 不同进程 这里所说的进程通常指的是用户进程 之间的资源是独立的 没有关联 不能在一个进程中直接访问另一个进程的资源 例如打开的文件描述符 但是 进程不是孤立的 不同的进程需要进行信息的交互和状态的传递等 因此需

  • 微信公众号支付H5调用支付详解

    原文地址 http blog csdn net fengshizty article details 45564685 微信公众号支付 最近项目需要微信支付 然后看了下微信公众号支付 虽然不难 但是细节还是需要注意的 用了大半天时间写了个d

  • [Java]JAVA获取实体与List 数组的转换

    public class BeanToArray private String beanNames private Object values public BeanToArray public BeanToArray String bea

  • vs添加第三方库详解

    vs添加第三方库详解 一 编写库所生成的文件 核心文件 二 两种使用库的方式 此时添加一个Pro工程调用这个库 三 库导出函数时候的细节情况 四 新建工程使用这个库 以前总是不知道怎么使用第三方库 每次想学习一个库进行开发 总是遇到各种各样

  • Java中关于System.out.println/print的运算规则

    一 输出到控制台 System out println msg 输出一个字符串 带换行 n System out print msg 输出一个字符串 不带换行 n System out printf format msg 格式化输出 注 p

  • SpringMVC的请求（参数绑定注解、Restful风格的参数的获取、自定义类型转换器、获得Servlet相关API）

    SpringMVC的请求 获得请求参数 SpringMVC的请求 获得请求参数 SpringMVC的请求 获得请求参数 1 SpringMVC的请求 获得请求参数 配置全局乱码过滤器 2 SpringMVC的请求 获得请求参数 参数绑定注解

  • Serializable简单介绍

    Serializable 序列化 什么是序列化 序列化是将对象状态转化为可保持或者传输的格式过程 与序列化相反的是反序列化 完成序列化和反序列化 可以存储或传输数据 一般情况下 在定义实体类时会使用Serializable 为什么要序列化对

  • 硬件学习——I2C

    I2C简单来讲就是2线的串行总线 由SDA Serial Data Line 和SCL Serial Clock Line 构成 它遵循主从结构 允许多主多从 主设备 发起 停止数据输出 并且通过控制时钟来控制数据传输过程 从设备 响应主设

  • 若依vue分离版使用字典

    首先来看官方文档 接下来我们进行操作 第一步已经添加完 来做第二步 打开index vue 在index vue中 找到变量定义的位置 一般在data 中 定义一个新数组

  • LayUI中的基本元素之面板

    前言 最近在准备找工作的事项 但是作为一个后台也是需要了解一些前端框架的 就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本 所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手 后面会考虑使用VUE ElementUI

热门标签