LayUI前端设计框架

最新推荐文章于 2024-08-24 16:44:01 发布

Jacky-008

最新推荐文章于 2024-08-24 16:44:01 发布

阅读量1k

点赞数

文章标签：前端 layui javascript

本文链接：https://blog.csdn.net/chenliang1038/article/details/124665762

版权

本文详细介绍了LayUI框架的目录结构，包括css、font和layui.js核心文件。同时，讲解了如何在HTML中链接LayUI，提供了本地和CDN的引入方式。接着，重点阐述了LayUI的模块管理，包括自定义模块的定义与使用，以及如何通过layui.use()调用和管理模块。最后，提到了通过layui.device()获取浏览器信息的方法。

摘要由CSDN通过智能技术生成

参考文档：https://www.layuion.com/doc/

1、 LayUI目录结构

├─css //css目录
│ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库

2、HTML连接layui

本地连接
{% load static %}
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
<script src="{% static 'layui/layui.js' %}"></script>

UNPKG 和 CDNJS 均为第三方开源免费的 CDN，通过 NPM/GitHub 实时同步
<!-- 引入 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">

3、模块

3.1、自定义模块(define)

// layui 模块的定义（新 js 文件）
layui.define([mods], function(exports){  // [mods]：依赖那些模块，function：执行函数
   //代码
  exports('mod', api);  // 申明模块
});

3.2、模块使用(define)

//1、引用指定模块
layui.use(['layer', 'laydate'], function(){
  var layer = layui.layer
  ,laydate = layui.laydate;
  
  //do something
}); 

//2、引用所有模块（layui 2.6 开始支持）
layui.use(function(){
  var layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table;
  //…
  
  //do something
});

//3、通过回调的参数得到模块对象
layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){
  //使用 layer
  layer.msg('test');
  //使用 laydate
  laydate.render({});
  //使用 table
  table.render({})
});

3.3、获取浏览器信息

var device = layui.device();
// 输出：
{
  os: "windows" //当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等
  ,ie: false //当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false
  ,weixin: false //当前浏览器是否为微信 App 环境
  ,android: false //当前浏览器是否为安卓系统环境
  ,ios: false //当前浏览器是否为 IOS 系统环境
  ,mobile: false //当前浏览器是否为移动设备环境（v2.5.7 新增）
}