layui个人学习

这篇博客详细介绍了layui前端框架的学习内容,包括图标、按钮、导航菜单、选项卡、面板、布局、时间线、颜色选择器等组件的使用方法和相关样式。重点讲解了表单、弹出层和文件上传的实现,特别是表单验证和监听事件。同时,还涵盖了树形组件dtree的掌握。
摘要由CSDN通过智能技术生成

layui

下载文件说明
  • css:样式
  • font:字体
  • image:图
  • lay:里面的model对应相应的内置模块
  • layui.all.js:包含了所有模块的 js
  • layui.js:框架 如果要使用必须使用 layui.use([“table”,“layer”,“laydate”],function(){})

学习内容

使用方法:

先要引入:
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

1.图标(熟悉)

方法1:使用字符实体
<div class="layui-icon">&#xe6c9;</div>//半实心

==注意:必须使用class=‘’layui-icon“==代表layui的图标样式去渲染

方法2:使用样式
<div class="layui-icon layui-icon-heart-fill"></div>

2.按钮(掌握)

相关样式

  • 必要样式 layui-btn

  • 主题样式

    • layui-btn-primary 原始按钮
    • layui-btn-normal 百搭按钮
    • layui-btn-warm 暖色按钮
    • layui-btn-danger 警告按钮
    • layui-btn-disabled 禁用按钮
  • 大小样式

    • layui-btn-lg 大型按钮
    • layui-btn-sm 小型按钮
    • layui-btn-xs 微型按钮
  • 图标结合

    • <div class="layui-btn lay-icon layui-icon-rate-half"></div>
      
  • 圆角按钮

    • <div class="layui-btn lay-btn-primary layui-btn-radius"></div>
      
  • 按钮组

    <div class="layui-btn-group">
    	<button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">增加</button>
    </div>
    
  • 为按钮添加事件(下面以弹出事件为例)

    <script>
    	layui.use(["jquery"],function(){
          
            var $=layui.jquery;
            $(".layui-btn").click(function(){
          
                alert($(this).html())
            })
        })
    </script>
    

3.导航菜单(熟悉)

  • 相关样式

    • 方向:水平(默认)

      ​ 垂直 layui-nav-tree

  • 其他样式

    • layui-nav 代表这个是导航菜单栏
      • layui-nav-item 代表这个导航菜单栏的一个子项
        • layui-nav-child 子项的子项
      • layui-this 代表当前选中的菜单项

4.选项卡(熟悉)

  • 风格说明

    • 默认风格 只需加 layui-tab
    • 简洁风格 layui-tab-brief
    • 卡片风格 layui-tab-card
  • 相关样式

    • layui-tab 代表一个选项卡
      • layui-tab-title 代表卡片的头
        • layui-this 启动选中
      • layui-tab-content 代表卡片的内容包装体
        • layui-tab-item 具体的卡片内容
        • layui-show 启动显示
  • 相关属性

    • lay-allowclose 是否启动关闭按钮

在这里插入图片描述

  • lay-filter=“demo” layui使用的可以找到元素的属性
<div class="layui-tab layui-tab-card" id="demo" lay-filter="demo" lay-allowclose="true">

相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Andy826

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值