layui个人学习

最新推荐文章于 2024-04-18 17:17:12 发布

Andy826

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量667

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Andy826/article/details/113884039

版权

这篇博客详细介绍了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

最低0.47元/天解锁文章

Andy826

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录