UI框架Layui入门介绍

作者: 学知 | 来源:发表于2020-01-07 22:21 被阅读0次

Layui(谐音,类UI),一款为服务端程序员量身定做的UI框架,采用原生的HTML/CSS/JS编写,体积轻盈,内容丰富。使用Layui后,一次性解决弹出层、日期插件、数据分页、表格、文件上传等常用模块。除此之外,layui兼容除IE6/7外的所有浏览器,可作为 PC端后台系统和前台界面的快速开发方案。

下载layui的三种方法

方法1:官网下载:https://www.layui.com/,解压后,文件夹结构如下:

├─css //css目录
  │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─code.css
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

方法2:github官网下载:https://github.com/sentsin/layui/

方法3:npm下载,下载命令为 npm i layui-src,不知道npm的同学可参考:到底什么是npm

Layui的两种加载方法

方法1:按模块加载layui.css+layui.js,适用于线下开发环境,方便团队调试代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单模块加载</title>
    <link rel="stylesheet" href="./layui-v2.5.5/layui/css/layui.css">
</head>
<body>
    
</body>
<script src="./layui-v2.5.5/layui/layui.js"></script>
<script>
;!function(){
    //layui.use()加载模块
    layui.use(['layer','form'],function(){
        var layer=layui.layer;
        layer.open({
          title: '模块化加载'
          ,content: 'hello,layui'
        });  
    });
}();
</script>
</html> 

方法2:全模块加载layui.css+layui.all.js,适用于线上环境,介绍请求静态资源的次数。

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>全模块加载</title>
   <link rel="stylesheet" href="./layui-v2.5.5/layui/css/layui.css">
</head>
<body>
   
</body>
<script src="./layui-v2.5.5/layui/layui.all.js"></script>
<script>
   // 无需再执行layui.use()方法加载模块,直接使用即可
   ;!function(){
       var layer=layui.layer,form=layui.form;
       layer.open({
           title:"全模块加载",
           content:"hello,layui"
       });
   }();
</script>
</html> 

以上就是layui入门介绍的全部知识,在之后的文章中还会介绍如何使用开发中常用的表单模块、文件上传模块、分页模块等。


每日抽奖查询

相关文章

  • UI框架Layui入门介绍

    Layui(谐音,类UI),一款为服务端程序员量身定做的UI框架,采用原生的HTML/CSS/JS编写,体积轻盈,...

  • layui(类ui)入门指南

    开始使用 - 入门指南 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTM...

  • Layui镜像站

    Layui镜像站:Layui - 经典开源模块化前端 UI 框架[https://www.layui.site/]...

  • ui框架集合

    vant有赞移动端电商ui框架 layui偏向后台开发ui框架 antreact ui框架 elementvuep...

  • layui后台管理—table 数据表格详细讲解

    1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组...

  • 前端UI框架

    1.pc端框架 layui iview ant design2.移动端框架 mint ui cube ui vant

  • LayUI的安装及使用

    LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 ​ layui(谐音:类UI) 是一款采用自身...

  • layui与Bootstrap

    layui和bootstrap 对比 这两个都属于UI渲染框架。 layui是国人开发的一套框架,2016年出来的...

  • 如何使用layui实现分页功能

    layui是一款很经典的前端UI框架。因为其功能强大,界面清爽美观,容易上手,深受大家的喜爱。此文主要介绍layu...

  • 再见!LavUI

    9月26日消息,前端UI框架Layui在其官网发布公告称,layui官网将于2021年10月13日进行下线。届时,...

网友评论

    本文标题:UI框架Layui入门介绍

    本文链接:https://www.haomeiwen.com/subject/qnrdactx.html