layui学习之路-持续更新

最新推荐文章于 2023-10-19 16:57:02 发布

w_n_s

最新推荐文章于 2023-10-19 16:57:02 发布

阅读量648

点赞数 2

文章标签： layui

本文链接：https://blog.csdn.net/w_n_s/article/details/100661568

版权

layui学习

专栏目录-【持续更新】

经典模块化前端框架
由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案

layui简介

layui现在的版本为2.5.4，下载量已经达到1220622次（截止到2019年9月9日15:02:18），其中在github点赞已经达到19.5k，感觉还是可以的。基于layui的后台模板还是比较经常使用的，开发Java的人知道。

layui优点：

采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写形式，极低门槛，拿来即用。
**返璞归真：**身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。
**双面体验：**拥有双面的不仅是人生，还有 layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
**星辰大海：**如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是 layui 不灭的执念。
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

为什么使用layui

ayui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

开始使用layui

首先我们进入layui官网：https://www.layui.com/ 在官网首页下载layui2.5.4版本
下载完以后解压查看目录结构

我们需要看一下layu/modules里面的文件：

这里面包括jquery.js,element.js等，这些都是基于layui的js文件。
在使用的时候需要我们调用，具体语法如下所述：
layui.use([‘element’],function(){
//JS逻辑代码，其中element可以跟多个，需用‘，’隔开，然后用“”或‘引入’
})
github仓库下载
https://github.com/sentsin/layui/
npm安装
npm install layui-src
一般用于webpack管理

快速上手

下载并解压layui文件后，讲其完整的部署到所开发项目中，以便于我们进行二次开发
我们需要引入下述两个文件：
./layui/css/layui.css
./layui/layui.js

官网还给出了两种开发方式：模块化开发和非模块化开发。
有兴趣的或者JS基础比较好的可以去官网看一下https://www.layui.com/

layui图标

我们从layui简单的开始—icon图标

首先创建一个icon.html文件
将layui.css和layui.js引入（请大家养成一个好习惯，css和js一起引入）
使用一个容器元素（如：div、span、p等）,有两种办法使用layui的图标

这是layui官网图标截图，大家可以看到，共有140个图标，上文我们说到，共有两种办法，话不所说，直接上代码：

代码很容易看懂，不解释。

layui按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

主题按钮
源代码：
尺寸按钮

在主题按钮的class后加上layui-btn-lg（大型按钮）、layui-btn表示默认尺寸按钮、layui-btn-sm小型按钮、layui-btn-xs迷你按钮
圆角按钮

只需在想要圆角按钮的layui-btn后面加上layui-btn-radius即可。
图标按钮
图标按钮为按钮和图标组合，如代码所示：
按钮组
将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
点击某个按钮弹出对话框
layui.use([‘jquery’],function(){ //引入jquery模板
var $= l a y u i . j q u e r y; / / 定义$ 符号
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots alert($ (this).html())//点击事件，弹出自身按钮文字
})
})
是自己写了一个关于按钮的页面，有需要的可以看一下。
效果如图所示：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮</title>
    <link rel="stylesheet" href="reources/layui/css/layui.css">  
    <!-- 如需使用请更换为自己的css路径 -->
</head>
<body>
        <legend>主体按钮</legend>
        <div>
          <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
          <button type="button" class="layui-btn">默认按钮</button>
          <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
          <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
          <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
          <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
        </div>

        <legend>图标按钮</legend>
        <div>
            <button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-cellphone">手机按钮</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-lg">
                <span class="layui-icon">&#xe6c9;</span>半角按钮大
            </button>
        </div>
    
        <legend>圆角按钮</legend>
        <div>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">圆角按钮</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg">圆角按钮大</button>
        </div> 
        
        <legend>按钮组</legend>
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
            <span class="layui-btn layui-btn-primary">AAAA</span>
            <button type="button" class="layui-btn">默认按钮</button>
            <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
            <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
            <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
            <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-lg">大按钮</button>
        </div>

</body>
<script src="reources/layui/layui.js"></script>   
<!-- 如需使用请更换为自己的js路径 -->
<script>
    layui.use(['jquery'],function(){
        var $=layui.jquery;
        $('.layui-btn').click(function(){
            alert($(this).html())
        })
    })
</script>
</html>

layui导航栏

导航栏依赖加载模块为：element

水平导航栏

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
          <legend>水平导航菜单</legend>
      </fieldset>
               
      <ul class="layui-nav">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this">
          <a href="javascript:;">产品</a>
          <dl class="layui-nav-child">
            <dd><a href="">选项1</a></dd>
            <dd class="layui-this"><a href="">选项2</a></dd>
            <dd><a href="">选项3</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd class="layui-this"><a href="">选中项</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
      </ul>

依赖class=‘layui-nav’
其中layui-this指当前定位在此。

效果如图：
在这里插入图片描述
可以对水平导航增加背景颜色：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

垂直导航

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>垂直导航菜单</legend>
                  </fieldset>
                   
                  <ul class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item"><a href="">最新活动</a></li>
                    <li class="layui-nav-item layui-this">
                      <a href="javascript:;">产品</a>
                      <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">大数据</a></li>
                    <li class="layui-nav-item">
                      <a href="javascript:;">解决方案</a>
                      <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd><a href="">后台模版</a></dd>
                        <dd class="layui-this"><a href="">选中项</a></dd>
                        <dd><a href="">电商平台</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">社区</a></li>
                  </ul>

效果如图：
在这里插入图片描述
其中垂直导航栏支持背景颜色仅有：layui-bg-cyan（藏青）

layui选项卡

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用

默认选项卡

在这里插入图片描述
代码：

 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>默认风格的Tab</legend>
    </fieldset>
               
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>

简洁风格选项卡和卡片风格对应代码如下：
在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>简洁风格的Tab</legend>
    </fieldset>
                   
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>

2.卡片风格的tab

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>卡片风格的Tab</legend>
    </fieldset>
                   
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>

3.可删除的tab


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>可删除的简洁风格的Tab</legend>
    </fieldset>
                       
    <div class="layui-tab layui-tab-brief" lay-allowclose='true'>
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>

只需在class='layui-tab’后加上 lay-allowclose=‘true’

动态操作tab选项卡

 <div class="layui-tab layui-tab-brief" lay-allowclose='true' lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li lay-id='1'>用户管理</li>
            <li>权限分配</li>
            <li lay-id='2'>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <!-- 添加需要demo -->
    <!-- 给出三个按钮，分别为添加tab,切换tab,删除tab -->
    <button type="button" class="layui-btn" id="add">添加一个add</button>
    <button type="button" class="layui-btn" id="change">切换用户管理</button>
    <button type="button" class="layui-btn" id="delete">删除商品管理</button>

JS逻辑代码为：

<script>
    // 引入jquery和element模块
    layui.use(['element','jquery'],function(){
        // 定义$符号
        var $=layui.jquery;
        // 定义element
        var element=layui.element;
        // 添加一个tab
        $('#add').click(function(){
            element.tabAdd('demo', {
                title: '选项卡的标题'
                ,content: '选项卡的内容' //支持传入html
                ,id: '选项卡标题的lay-id属性值'
            });       
        })
        // 切换tab
        $('#change').click(function(){
            element.tabChange('demo', '1');
        })
        // 删除tab
        $('#delete').click(function(){
            element.tabDelete('demo', '2'); //删除 lay-id="xxx" 的这一项  
        })
    })
</script>

可以参考layui官网里element模块元素操作文档：https://www.layui.com/doc/modules/element.html

layui进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

默认风格的进度条

代码所示：

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>默认风格的进度条</legend>
    </fieldset>
                
    <div class="layui-progress">
        <div class="layui-progress-bar" lay-percent="40%"></div>
    </div>
    <div style="margin-top: 15px; width:300px">
        <div class="layui-progress">
            <div class="layui-progress-bar" lay-percent="70%"></div>
        </div>
    </div>

2.更多颜色进度条和大进度条和显示进度条比例
在这里插入图片描述
代码所示：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>更多颜色选取</legend>
    </fieldset>
           
    <div class="layui-progress layui-progress-big"  lay-showpercent="true">
        <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
    </div>
           
    <br>
           
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
    </div>
           
    <br>
           
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
    </div>
           
    <br>
           
    <div class="layui-progress" lay-showpercent='true'>
        <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
    </div>
           
    <br>
           
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
    </div>

静态风格进度条属性样式总结：

样式：
（1）基本样式：layui-progress layui-progress-bar
（2）大进度条：layui-progress-big
属性：
（1）设置默认长度：lay-percent=“50%”
（2）是否显示比例： lay-showpercent=‘true’
动态进度条操作

代码所示：

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>动态改变进度</legend>
    </fieldset>
           
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
           
    <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
        <button class="layui-btn site-demo-active" id="setPercent">设置50%</button>
        <button class="layui-btn site-demo-active" id='setZero'>归零</button>
    </div>
</body>
<script src="reources/layui/layui.js"></script>//如需使用请更改js路径
<script>
    layui.use(['element'],function(){
        var $ = layui.jquery;
        var element=layui.element;
        $('#setPercent').click(function(){
            element.progress('demo','50%')
        })
        $('#setZero').click(function(){
            element.progress('demo','0')
        })
    }); 
</script>

需要引入element模块。
然后动态操作。
不懂可联系本人，联系方式在结尾

结尾

这是本人第一次写博客，新手。如有不到位的地方还请指教。
如需技术上的知识探讨请加QQ：1204039238或发送邮箱pcshaovip@163.com
参考文献
[1]: https://www.layui.com/

w_n_s

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
layui学习之路-持续更新

layui学习专栏目录-【持续更新】layui简介为什么使用layuilayui开始使用快速上手layui图标layui按钮layui导航栏layui选项卡结尾专栏目录-【持续更新】layui写后端模板经常用，我是写前端的，后端只是了解一下。上次听一个朋友说我们写后端现在的模板都是layui，那个时候我是知道这个ui框架的，只是没学。朋友问我会不会，我说我没了解过，然后这几天一直在学习layu...
复制链接

扫一扫