快速学会使用LayUI

最新推荐文章于 2024-04-16 04:56:18 发布

Julie_zm

最新推荐文章于 2024-04-16 04:56:18 发布

阅读量863

点赞数 1

文章标签： layui 前端 ui

本文链接：https://blog.csdn.net/weixin_45689858/article/details/127276612

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
使用步骤
总结

前言

学习网址：https://layui.gitee.io/v2/docs/`

Layui（谐音：类 UI) 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用

使用步骤

1.下载库

官网首页下载
你可以在我们的官网首页下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下：
layui/
├─css
│ └─layui.css # 核心样式库
└─layui.js # 核心模块库
Git 下载
你也可以通过 GitHub 或 Gitee 下载 released 版本。或者直接下载整个仓库，以便进行二次开发。也可以 Fork layui 参与
第三方 CDN 方式引入：
UNPKG 和 CDNJS 均为第三方免费的 CDN，资源通过 NPM/GitHub 进行同步。另外还可以采用国内的 Staticfile CDN。
UNPKG 引入示例

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.引入库

将 Layui 下载到了本地，那么可将其放置到你项目的静态资源目录，并在页面引入核心文件即可：

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>开始使用 layui</title>
      <link href="./layui/css/layui.css" rel="stylesheet">
    </head>
    <body>
     
    <!-- 你的 HTML 代码 -->
     
    <script src="./layui/layui.js"></script>
    <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      
      layer.msg('Hello World');
    });
    </script> 
    </body>
    </html>

3.关于配置

全局配置

方法：layui.config(options)

你可以在使用模块之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下：

layui.config({
  dir: '/res/layui/' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
  ,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
  ,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
  ,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
});

<script>  
var LAYUI_GLOBAL = {
  dir: '/res/layui/' //layui.js 所在目录（layui 2.6.6 开始新增）
};
</script>

定义模块

方法：layui.define([mods], callback)

通过该方法可在新的 JS 文件中定义一个 layui 模块。参数 mods 是可选的，用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数，它返回一个 exports 参数，用于输出该模块的接口。

</>

/** demo.js **/
layui.define(function(exports){
  //do something
  
  exports('demo', {
    msg: 'Hello Demo'
  });
});

加载模块

方法：layui.use([mods], callback)

参数 mods：如果填写，必须是一个 layui 合法的模块名（不能包含目录）。
从 layui 2.6 开始，若 mods 不填，只传一个 callback 参数，则表示引用所有内置模块。
参数 callback：即为模块加载完毕的回调函数。
从 layui 2.6 开始，该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。

</>

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

本地存储

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

    localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。
    sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。注：layui 2.2.5 新增

上述两个方法的使用方式是完全一样的。其中参数 table 为表名，settings是一个对象，用于设置 key、value。下面以 layui.data 方法为例：

</>

//【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
layui.data('test', {
  key: 'nickname'
  ,value: '张三'
});
 
//【删】：删除 test 表的 nickname 字段
layui.data('test', {
  key: 'nickname'
  ,remove: true
});
layui.data('test', null); //删除test表
  
//【改】：同【增】，会覆盖已经存储的数据
  
//【查】：向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“张三”

更多底层 API

除上述介绍的方法外，layui 内部还提供了许多底层引擎，他们同样是整个 layui 框架的有力支撑，在日常应用中通常也会用到：

方法/属性	描述
layui.cache	静态属性。获得一些配置及临时的缓存信息
layui.extend(options)	拓展一个模块别名，如：layui.extend({test: ‘/res/js/test’})
layui.each(obj, fn)	对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句
layui.type(operand)	获取详细数据类型（基本数据类型和各类常见引用类型）如：layui.type([]); //array layui.type({}); //object layui.type(new Date()); //date
layui.type(operand)	获取详细数据类型（基本数据类型和各类常见引用类型）如：
layui.isArray(obj)	对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等等。layui.isArray([1,6]); //true layui.isArray($(‘div’)); //true layui.isArray(document.querySelectorAll(‘div’)); //true(该方法为 layui 2.6.7 新增)
layui.getStyle(node, name)	获得一个原始 DOM 节点的 style 属性值，如：
layui.getStyle(document.body, ‘font-size’)
layui.img(url, callback, error)	图片预加载
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], ‘a’)
layui.router()	获得 location.hash 路由结构，一般在单页面应用中发挥作用。
layui.url(href)	用于将一段 URL 链接中的 pathname、search、hash 属性值进行对象化处理…参数： href 可选。若不传，则自动读取当前页面的 url（即：location.href）示例：var url = layui.url();
layui.hint()	向控制台打印一些异常信息，目前只返回了 error 方法：layui.hint().error(‘出错啦’);
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	增加自定义模块事件。有兴趣的同学可以阅读 layui.js 源码以及 form 模块
layui.event(modName, events, params)	执行自定义模块事件，搭配 onevent 使用
layui.off(events, modName)	用于移除模块相关事件（v2.5.7 新增）如：layui.off(‘select(filter)’, ‘form’)，那么 form.on(‘select(filter)’, callback)的事件将会被移除。
layui.factory(modName)	用于获取模块对应的 define 回调函数

第三方工具

Layui 部分内置模块依赖 jQuery（比如 layer），但你不必额外引入 jQuery。Layui 已经将 jQuery 最稳定的一个版本进行了符合 Layui 规范的模块化处理，你只需要像使用 Layui 的其他模块一样去使用 jQuery 即可。

另外，我们的图标取材于阿里巴巴矢量图标库（iconfont），构建工具采用 Gulp 。

总结

layui 遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。

Julie_zm

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
快速学会使用LayUI

Layui（谐音：类 UI) 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用layui 遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。
复制链接

扫一扫