How to use layui-Layui Tutorial-php.cn

Home

Web Front-end

Layui Tutorial

How to use layui

angryTom

Jul 29, 2019 am 10:39 AM

layui

How to use layui

If you want to know more about layui, you can click: layui tutorial

How to use layui

## Let’s take a look at the introduction of Layui first:

layui is an emotional front-end UI written using its own module specifications. The framework follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box. It is minimalist on the outside but full on the inside. It is light in size and rich in components. Every detail from the core code to the API has been carefully crafted, making it very suitable for rapid interface development. The first version of layui was released in the golden autumn of 2016. It is different from those UI frameworks based on the bottom layer of MVVM, but it does not go against the grain, but believes in returning to nature. To be precise, it is more tailor-made for server-side programmers. You do not need to get involved in the complex configuration of various front-end tools. You only need to face the browser itself, and all the elements and interactions you need can be found at your fingertips. layui is compatible with all browsers currently used by humans (except IE6/7), and can be used as a quick development solution for PC-side backend systems and front-end interfaces.

Get Layui

You can download the latest version of layui from the official website homepage. It has been automatically built and is more suitable for use in production environments. The directory structure is as follows:

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

Get started quickly

After obtaining layui, fully deploy it to your project directory (or static resource server ), you only need to import the following two files:

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

You only need to load these two files and do not need to worry about any other files. Because they (such as each module) are automatically loaded when they are finally used. This is a basic entry page;

Modular approach

We recommend that you follow layui’s module specifications to create an entry file and pass Layui.use() method to load the entry file, as shown below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>

Non-modular method (that is, all modules are loaded at once)

If you don’t like the modular organization of layui, you can definitely adopt the “one-time loading” method. We package and merge layui.js and all modules separately into a complete js file. When using Just import this file directly. When you adopt this approach, you no longer need to load the module through the layui.use() method, you can use it directly, such as:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>非模块化方式使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

Modularization and non-modularization

I still prefer the concept of modularity, loading it when needed, because if it is non-modular, all js files will be loaded at the beginning, but in fact some pages may use very few modules. , there is no need to load such a large js file, so it is recommended to use the modular approach. Although non-modular is convenient, it is not very user-friendly.

Module Specification

Layui’s module is based on the asynchronous module loading method implemented internally in layui.js. It does not follow AMD (no Why, after all, you are willful!), but defined a set of more lightweight module specifications. And after a lot of practice, this method has become the core module loading engine of layui.

Pre-loading

Let’s get straight to the point, it’s more appropriate to just say how to use it. Layui's module loading uses the core layui.use(mods, callback) method. When your JS needs to use the Layui module, we recommend that you use preloading, because this can avoid the trouble of writing layui.use everywhere. You should define it like this in the outermost layer:

/*
  Demo1.js
  使用Layui的form和upload模块
*/
layui.use([&#39;form&#39;, &#39;upload&#39;], function(){  //如果只加载一个模块，可以不填数组。如：layui.use(&#39;form&#39;)
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on(&#39;submit(test)&#39;, function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: &#39;上传接口url&#39;
    ,success: function(data){
      console.log(data);
    }
  })
});

Load on demand (not recommended)

If you have obsessive-compulsive disorder, you are not interested in the website has extreme performance requirements. You don't want to load the required modules in advance, but only load the modules when an action is triggered. Then, this is allowed. You don’t need to wrap a big layui.use in the outermost layer of your JS, you only need:

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener(&#39;click&#39;, function(){
  layui.use(&#39;laytpl&#39;, function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl(&#39;&#39;).render({});
    console.log(html);
  });
});

Note: If you need to use a lot of modules in your JS, we will not It is not recommended that you use this loading method, because it means you have to write a lot of layui.use(), and the code maintainability is not high. It is recommended to use: preloading. That is, in a JS file, just write a use.

Module namespace

　　Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如：

layui.use([&#39;layer&#39;, &#39;laypage&#39;, &#39;laydate&#39;], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
  
  //使用模块
});

　　一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：

<input onclick="layui.laydate()">

扩展一个Layui模块

　　layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：

　　第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）

　　第二步：编写test.js 如下：

/**
  扩展一个test模块
**/      
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define(&#39;layer&#39;, callback);
  var obj = {
    hello: function(str){
      alert(&#39;Hello &#39;+ (str||&#39;test&#39;));
    }
  };
  //输出test接口
  exports(&#39;test&#39;, obj);
});

　　第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: &#39;/res/js/&#39; //假设这是test.js所在的目录
}).extend({ //设定模块别名
  test: &#39;test&#39; //如果test.js是在根目录，也可以不用设定别名
  ,test1: &#39;admin/test1&#39; //相对于上述base目录的子目录
});
 
//使用test
layui.use(&#39;test&#39;, function(){
  var test = layui.test;
  
  test.hello(&#39;World!&#39;); //弹出Hello World!
});
//使用test1
layui.use(&#39;test1&#39;, function(){
  var test = layui.test1;
  
  //……
});

大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。

The above is the detailed content of How to use layui. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

2023最新layui视频教程推荐（建议收藏）Jul 19, 2021 pm 05:22 PM

以下为大家整理了前端UI框架 — layui的视频教程，不需要从迅雷、百度云之类的第三方网盘平台下载，全部在线免费观看。教程由浅入深，有前端基础的人就能学习，从安装到案例讲解，全面详细，帮助你更快更好的掌握layui框架！

如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架，提供了简洁美观的界面组件和丰富的交互体验。在开发中，我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先，我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM

如何利用Layui实现图片轮播图功能现如今，图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼，吸引用户的眼球，提升用户体验。在本文中，我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先，我们需要在HTML页面中引入Layui的核心文件和样式文件：<linkrel="stylesheet"h

如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见，通过展示用户上传的图片，让用户能够方便地浏览和管理图片。为了提供更好的用户体验，一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能，同时提供具体的代码示例。首先，确保您已经引入Layui框架的CSS和JS文件。您

如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM

如何利用Layui实现图片反色和亮度调节功能引言：在前端开发中，经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能，并提供具体代码实例供参考。一、Layui简介：Layui是一款优秀的前端UI框架，具有简洁、美观、易用等特点。它提供了丰富的前端组件，让开发者能够轻松搭建出精美的网站。二、准备工作：在开始之前，我

如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言：随着互联网的发展，数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理，还是个人的文件存储，都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架，具有简洁明了的设计以及丰富的组件库，非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述：在线客服系统是现代企业提供与客户交流的重要渠道之一，而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统，并提供具体的代码示例。一、准备工作安装Node.js：在开发环境中安装Node.js，并配置好相关环境。安装Layui：在项目中引入Lay

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Two Point Museum: All Exhibits And Where To Find Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software