程序员经验分享-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中的基本元素之面板 的相关文章

  • 会议OA项目之会议发布（多功能下拉框的详解）

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 主要功能点介绍 二 效果展示 三 前端代码 jsp js 四 后端代码

  • LayUi之手风琴的趣味案例

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 Welcome Huihui s Code World 一 手风琴是什么 二 手风琴在什么时候使用 常见使用场景 三 怎么完成手

  • layUI基本使用——布局

    layui特点 1 layui属于轻量级框架 简单美化 是用于开发后端模式 它在服务端页面上有非常好的效果 2 layui是提供给后端开发人员的ui框架 基于DOM驱动 layui的使用 引入layui的核心css文件 引入layui的he

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

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

  • layui table直接编辑

    修改lay modules table js 在TPL HEADER中 if item2 type checkbox 复选框 修改为不显示标题行复选框 if item2 type checkbox item2 header undefine

  • LayUI之CRUD(增删改查)

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

  • layui的使用

    下载链接 https pan baidu com s 1TIRrwFhua61jTqUCjme58Q pwd 1234 提取码 1234 gt layuiAdmin pro 即 单页版 gt layuiAdmin std 即 iframe

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

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

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

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

  • LayUI系列（一）之layui介绍以及登录功能的实现

    文章目录 一 layui简介 1 1 layui介绍 1 2 主要构成 1 3 迭代历程 1 4 layui easyui和bootstrap对比 1 4 1 layui与bootstrap对比 这两个都属于ui渲染框架 1 4 2 lay

  • LayUI图片上传接口

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

  • LayUi介绍&前言

    目录 1 什么是layui 2 layui easyui与bootstrap的对比 有趣的对比方式 嘿嘿嘿 easyui jquery html4 用来做后台的管理界面 半老徐娘 bootstrap jquery html5 美女 拜金 l

  • Layui框架的拖动上传 以及 时间选择器的基本使用

    上传用的layui的点击or拖动上传 其他上传也同理 不喜勿喷 欢迎补充 上代码 html div class layui form item style width 1 div

  • layui switch 设置默认开关属性

    给元素定义ID switch order var flag true if flag document getElementById switch order setAttribute checked on else document ge

  • 基于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 php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php

  • 使用layui 写一段动态向form表单添加select下拉框，带删除功能

    可以参考如下示例代码 实现动态向表单中添加和删除 select 下拉框 div class layui container div

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

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

  • layui复选框按钮事件（智能去重刷新）

    1 写好复选框 lt input type checkbox value 0 name available title 智能去重 id available lay filter available gt 2 给复选框加事件 form on

  • uview的select组件选择问题

    官方文档羞涩难懂 直接用拖拽工具 对于常用的表单组件 可直接帮你生成相关事件 时间 单列多列等选择器等支持数据回显功能 免开发 在拖拽面板中的 formitem 表单项中 转载 uniapp页面速成提效工具 uniapp uview ui

随机推荐

  • 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

热门标签