How to use layui-Layui Tutorial-php.cn

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和所有模块的合并文件

Copy after login

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

Copy after login

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>

Copy after login

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>

Copy after login

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);
    }
  })
});

Copy after login

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);
  });
});

Copy after login

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模块
  
  //使用模块
});

Copy after login

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

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

Copy after login

扩展一个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);
});

Copy after login

　　第三步：设定扩展模块所在的目录，然后就可以在别的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;
  
  //……
});

Copy after login

大体上来说，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!