LAYUI

最新推荐文章于 2023-09-06 09:21:31 发布

迪雅电动车

最新推荐文章于 2023-09-06 09:21:31 发布

阅读量61

点赞数 1

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_70587244/article/details/132543586

版权

简单尝试

前端LayUI框架快速上手详解(一)_layui框架教程_生命是有光的的博客-CSDN博客

前端LayUI框架快速上手详解(二)_layui yes_生命是有光的的博客-CSDN博客

参考的这篇文章

简介

LayUI 是一款经典模块化响应式前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

初步使用

官网打不开，开这个镜像网站：Layui - 经典开源模块化前端 UI 框架

官方镜像文档Layui 开发使用文档 - 入门指南

下载

目录在这里插入图片描述

下载完毕后吧这个layui文件夹放入你的web项目中

或者

就可以使用了（用之前引用一下）

引用

创建页面之后需要引用一下css和js的核心库

<!-- LayUI的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="layui\css\layui.css"/>
<!-- LayUI的核心JS文件（采用模块化引入） --> 
<script src="layui\layui.js" type="text/javascript" charset="utf-8"></script>

当然你也可以用cdn引用

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">

给提供一个官网给的演示页面，可以体验一下layui的魅力

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>在线测试</title>
  <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
  <style>
    body{padding: 6px 16px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
 
<div class="layui-tab layui-tab-brief" lay-filter="demo">
  <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">
      <div class="layui-carousel" id="test1">
        <div carousel-item>
          <div><p class="demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
          <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
          <div><p class="layui-bg-green demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
          <div><p class="layui-bg-blue demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
          <div><p class="demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="laydateDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div id="pageDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-upload-drag" id="uploadDemo">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
          <hr>
          <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="sliderDemo" style="margin: 52px 18px;"></div>
    </div>
  </div>
</div>

<blockquote class="layui-elem-quote layui-hide layui-text" id="footer">
  本页演示版本：layui v{{= layui.v }}
</blockquote>

  
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script>
layui.use(function(){
  // 得到需要的内置组件
  var layer = layui.layer; //弹层
  var laypage = layui.laypage; //分页
  var laydate = layui.laydate; //日期
  var table = layui.table; //表格
  var carousel = layui.carousel; //轮播
  var upload = layui.upload; //上传
  var element = layui.element; //元素操作
  var slider = layui.slider; //滑块
  var dropdown = layui.dropdown; //下拉菜单
  
  // 向世界问个好
  layer.msg('Hello World');
  
  // Tab 切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  // 执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/v2/static/json/table/user.json' //数据接口（此处为静态数据，仅作演示）
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRow: '合计：'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: '{{= d.TOTAL_NUMS }}'}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150} 
      ,{field: 'sign', title: '签名', width: 200}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'words', title: '字数', width: 135, sort: true, totalRow: true}
      ,{fixed: 'right', title: '操作', width: 150, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  // 头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  // 单元格工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'more'){
      //下拉菜单
      dropdown.render({
        elem: this //触发事件的 DOM 对象
        ,show: true //外部事件触发即显示
        ,data: [{
          title: '编辑'
          ,id: 'edit'
        },{
          title: '删除'
          ,id: 'del'
        }]
        ,click: function(menudata){
          if(menudata.id === 'del'){
            layer.confirm('真的删除行么', function(index){
              obj.del(); //删除对应行（tr）的DOM结构
              layer.close(index);
              //向服务端发送删除指令
            });
          } else if(menudata.id === 'edit'){
            layer.msg('编辑操作，当前行 ID:'+ data.id);
          }
        }
        ,align: 'right' //右对齐弹出
        ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
      })
    }
  });
  
  // 执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  // 将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2020-01-18': '小年'
      ,'2020-01-24': '除夕'
      ,'2020-01-25': '春节'
      ,'2020-02-01': '上班'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  // 分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 1000 //数据总数
    ,limit: 10 //每页显示的数据条数
    ,skin: '#1E9FFF' //自定义选中色值
    //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  // 上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //此处配置你自己的上传接口即可
    ,done: function(res){
      layer.msg('上传成功');
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
      console.log(res)
    }
    ,before: function(){
      layer.msg('上传中', {icon: 16, time: 0});
    }
  });
  
  // 滑块
  var sliderInst = slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });
  
  // 底部信息
  var footerTpl = lay('#footer')[0].innerHTML;
  lay('#footer').html(layui.laytpl(footerTpl).render({}))
  .removeClass('layui-hide');
});
</script>
</body>
</html>

样式

样式的操控是通过class名字来控制的，layui实现编译好了css样式，我们只需要给我们的html元素添加实现编译好的名字就可以实现样式

layui的布局是将页面栅格化为12等分，也就是说大小是通过几/12这种方式来定义的

    <!-- 
    栅格系统
        列组合
            1. 定义行   .layui-row
            2. 定义列	.layui-col-md*
                md 表示不同屏幕的标识（xs、sm、md、lg）
                * 表示列的数量
            3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行
 -->
<!-- 布局容器 -->
<div class="layui-container">
    <!-- 定义行 -->
    <div class="layui-row " style="border: 1px solid black;">
        <!-- 定义列  -->
        <div class="layui-col-md5" style="background-color: deepskyblue;">
            内容5/12
        </div>
        <div class="layui-col-md7" style="background-color: bisque;">
            内容7/12
        </div>
    </div>

预览

模块化

layui采用模块化引用的方式来使用自身，意思就是，我们使用哪里就去加载哪个模块，例如：我们需要一个弹窗,那么我们就去加载弹窗模块。多个引入，隔开

使用layui.use来引入

//加载了layer（弹出模块），中括号之中时你需要引用的模块
//layui.layer是在引用
layui.use(['layer'], function(){
  var layer = layui.layer;
  layer.msg('Hello World');
});

当然，随着时代发展，2.6版本之后如果你的引入方式是直接引入核心js模块的话，就和上文内容一样的引入方式他可以不写【】的内容，你可以直接用layui去点你的模块引入

layui.use(function(){
  var layer = layui.layer;
//可以多个引入(下面引入了表单)
  var form = layui.form;
  layer.msg('Hello World');
});

没有用模块加载（这样子官方不推荐）

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer;
  layer.msg('Hello World');
}();

内置模块

迪雅电动车

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LAYUI

LayUI是一款经典模块化响应式前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。
复制链接

扫一扫