7 LayUI

最新推荐文章于 2024-03-07 16:33:42 发布

yc_Cabbage

最新推荐文章于 2024-03-07 16:33:42 发布

阅读量551

点赞数

分类专栏： JavaWeb 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/yc_Cabbage/article/details/126295380

版权

JavaWeb 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

介绍

开源模块化前端 UI 框架, 由职业前端倾情打造，面向全层次的前后端开发者，易上手开源免费的 Web UI 组件库,这个框架，这个框架曾经非常流行，现在如果快速开发依然值得推荐，这个框架已经不维护，官网无法访问，访问到的都是基本上是被人对网站开放的一个镜像。作者建议大家拥抱 MVVM开发模式，也就是 VUE 类似的框架。
https://www.layuiweb.com/

下载

快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui样式(提供这种类名，我们可以直接使用)-->
    <link href="assets/layui/css/layui.css" rel="stylesheet">
    <!--引入layui js (提供了组件的功能)-->
    <script src="assets/layui/layui.js"></script>
</head>
<body>

   <!--自己的dom-->
   <button id="abc" class="layui-btn layui-btn-primary layui-border-blue" >按钮</button>

<script>
        //layui加载模块,use( 数组 ,  回调函数 ) 在数组中指定需要加载的模块，在回调函数中使用这些模块
        layui.use(['layer','form','jquery'],function () {
        //从layui框架中获取 layer模块
        let layer =  layui.layer;
        //从layui框架中获取 jquery模块
        let $ = layui.jquery;
        //从layui框架中获取 form 表单模块
        let form =  layui.form;
        //点击按钮 弹出层。
        $("#abc").click(function () {
             layer.alert('你好LayUI');
        })
    });
</script>

</body>
</html>

页面元素

页面规范
栅格和布局

理解：类似于(网格|表格)把页面按照行列来布局，每一列默认12等份，可以可以使用样式来声明元素可使用的份数。

涉及样式：
layui-container 容器样式。
layui-row 行样式。
layui-col-mdN 列样式。
layui-col-xx-offsetN 列偏移。

颜色

系统预制了各种主题颜色

图标

通常使用一个 标签来显示成一个图标，给这个标签添加样式

layui-icon 基础样式
layui-icon-xxx 具体的某个图片样式名(官网查询

  <button class="layui-btn layui-btn-normal"> <i class="layui-icon layui-icon-set"></i>  设置</button>

按钮

系统预设了几种主题(颜色)按钮
layui-btn 基本样式
layui-btn-主题单词 [ primary normal warm danger disable ]
layui-border-颜色 [ blue red orange green black ]
layui-btn-大小 [ xs sm lg ]
layui-btn-fluid 让按钮适应容器宽度。

表单

接受用户输入，用于录入信息界面必备。需要掌握 1. 数据校验 2.数据收集

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
     layui.use('form', function(){
        var form = layui.form;
        //监听提交 'submit(提交按钮的lay-filter)'    回调参数data 整个表单中的全部数据 data.field
        form.on('submit(formDemo)', function(data){
            // 收集到全部数据后转成JSON字符串。
            layer.alert(JSON.stringify(data.field));
            return false;
        });
      });
</script>

导航

页面盛放一系列导航链接的


<ul class="layui-nav" lay-filter="abc">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></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><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
    <li class="layui-nav-item"><a href="http://www.baidu.com">百度</a></li>
    <li class="layui-nav-item"><a abc="java">hello</a></li>
</ul>

获得点击内容


<script>
    layui.use(['element'],function () {
            layui.element.on('nav(abc)', function(elem){
                console.log(elem.attr("abc")); //得到当前点击的DOM对象
            });
    })
</script>

菜单

整理层级显示功能列表的组件

 <div style="width: 300px">

      <div class="layui-panel">
          <ul class="layui-menu" id="java">
              <li lay-options="{id: 100}">
                  <div class="layui-menu-body-title">menu item 1</div>
              </li>
              <li lay-options="{id: 101}">
                  <div class="layui-menu-body-title">
                      <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
                  </div>
              </li>
              <li class="layui-menu-item-divider"></li>
              <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                  <div class="layui-menu-body-title">
                      menu item 3 group <i class="layui-icon layui-icon-up"></i>
                  </div>
                  <ul>
                      <li lay-options="{id: 1031}">menu item 3-1</li>
                      <li lay-options="{id: 1032}">
                          <div class="layui-menu-body-title">menu item 3-2</div>
                      </li>
                  </ul>
              </li>
              <li class="layui-menu-item-divider"></li>
              <li lay-options="{id: 104}">
                  <div class="layui-menu-body-title">menu item 4</div>
              </li>
              <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                  <div class="layui-menu-body-title">
                      menu item 5
                      <i class="layui-icon layui-icon-right"></i>
                  </div>
                  <div class="layui-panel layui-menu-body-panel">
                      <ul>
                          <li lay-options="{id: 1051}">
                              <div class="layui-menu-body-title">menu item 5-1</div>
                          </li>
                          <li lay-options="{id: 1051}">
                              <div class="layui-menu-body-title">menu item 5-2</div>
                          </li>
                      </ul>
                  </div>
              </li>
              <li lay-options="{id: 106,age:18}">
                  <div class="layui-menu-body-title">menu item 6</div>
              </li>
          </ul>
      </div>

  </div>

获得点击的内容

<script>

    layui.use(['dropdown','jquery'], function(){
        var dropdown = layui.dropdown;
        var $ =layui.jquery;
        //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
        dropdown.on('click(java)', function(options){
            var othis = $(this); //当前菜单列表的 DOM 对象
            console.log(options.age); //菜单列表的 lay-options 中的参数
        });
    });

</script>

选项卡

比如内容较多的时候，可以把内容分成多个部分显示

<div style="width: 800px">

    <div class="layui-tab layui-tab-brief layui-bg-gray "  lay-allowClose="true"  lay-filter="abcd" >
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置0</li>
            <li>用户管理1</li>
            <li>权限分配2</li>
            <li>商品管理3</li>


        </ul>
        <div class="layui-tab-content" style="height: 500px">
            <div class="layui-tab-item">内容0</div>
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>


        </div>
    </div>

</div>

<button id="myadd">添加一个新的选项</button>

获得动态添加选项卡

<script>
     layui.use(['element','jquery'],function (){
         let element = layui.element;
         let $ = layui.jquery;
         element.on('tab(abcd)', function(data){
            // console.log(this); //当前Tab标题所在的原始DOM元素
             console.log(data.index); //得到当前Tab的所在下标
             console.log($(data.elem.find(".layui-tab-item").get(data.index)).text()); //得到当前的Tab大容器
         });
         $("#myadd").click(function () {
             element.tabAdd('abcd', {
                 title: '千锋'
                 ,content: '<img src="/images/jt.jpg" width="200" height="200">' //支持传入html
                 ,id: '选项卡标题的lay-id属性值'
             });
         });
     });
</script>

轮播

轮播首先满足 html 和 css 网页结构

<div class="layui-carousel" id="nb">
    <div carousel-item >
        <div><img src="images/jt.jpg"></div>
        <div><img src="images/ldh.jpg"></div>
        <div><img src="images/zxy.jpg"></div>
        <div><img src="images/xx.jpg"></div>
    </div>
</div>

通过js 渲染

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#nb'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            ,height: '400px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

日期组件

准备一个普通输入框 input

<div style="width: 300px;padding: 10px">
    <input id="gg" type="text" class="layui-input" >
</div>
<div style="width: 300px;padding: 10px">
    <input id="mm" type="text" class="layui-input" >
</div>

使用js 渲染

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#gg', //指定元素
            range:true
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#mm', //指定元素
            type:'time'
        });
    });
</script>

弹出层

弹出层主要涉及一下方法

<button id="btn1" class="layui-btn" >toast框</button>
<button id="btn2" class="layui-btn">信息框</button>
<button id="btn3" class="layui-btn">确认框</button>
<button id="btn4" class="layui-btn">open自定义框</button>

js 渲染

 layui.use(['layer','jquery'],function () {
           let layer = layui.layer;
           let $ = layui.jquery;

           $("#btn1").click(function (){
                layer.msg("加载成功",{icon: 3})
           });

           $("#btn2").click(function (){
             layer.alert("保存成功",{icon: 1})
           });


           $("#btn3").click(function (){
             layer.confirm("是否删除？",{icon: 3},function (){
                 layer.msg('你点的是确定')
             })
           });

             $("#btn4").click(function (){
                 layer.open({
                     type:1,
                     title:"公告",
                     content:'<div>五一放假通知</div>',
                     area:['400px','500px'],
                     closeBtn: 2
                 });
             });
     });

数据表格

高频使用组件，用于显示表格数据，通常使用ajax加载后台数据

<table id="table" lay-filter="dataTable">  </table>

使用js方法渲染

<script>
    layui.use(['jquery','table'],function (){
          let table = layui.table;
          table.render({
                  url:'http://127.0.0.1/api/v3/tag/specialList?plat=0&page=1&tagid=12&pagesize=20&ugc=1&id=68&sort=2',
                  elem: '#table' //指定原始表格元素选择器（推荐id选择器）
                  ,height: 500 //容器高度
                  ,cols: [[    //设置表头,把json数据绑定到列上面
                     {
                         title: "用户名",
                         field: "username"
                     },
                     {
                         title: "介绍",
                         field: 'specialname'
                     },
                      {
                          title: "封面图片",
                          field: 'imgurl'
                      }
                   ]] 
                    ,parseData(res){ //解决后端数据和 需要数据格式不一致的问题。
                      let obj = {
                           code: res.errcode,
                           data: res.data.info,
                           msg: "",
                           count: res.data.info.length
                        }
                       return obj;
                    }
            });
    });
</script>