Getting started with Layui-Layui Tutorial-php.cn

Getting started with Layui

尚

Release： 2019-11-14 20:54:15

forward

9702 people have browsed it

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box. Very suitable for rapid development of interfaces.

Getting started with Layui

After obtaining layui, deploy it completely to your project directory (or static resource server). You only need to introduce the following two files:

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

Copy after login

Yes, you don’t 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:

<!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

Note: To use layui, you need to load the module first. The above code is to preload the module! If you use layer directly without loading the module first, an error will be reported at runtime! The layer object cannot be found or the method cannot be found and other problems!

layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
});

Copy after login

The following is the code example I use:

Calling layui:

    <!--layui-->
    <link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="/libs/layui/layui.js" type="text/javascript"></script>

Copy after login

Preloading:

//layui layer
let layuiLayer;
//layui预先加载
layui.use([&#39;layer&#39;], function () {
    layuiLayer = layui.layer;
});

Copy after login

Using the layui object:

  layuiLayer.open({
            title: &#39;提示&#39;,
            content: &#39;请输入名字！&#39;
        })

Copy after login

The above is the detailed content of Getting started with Layui. For more information, please follow other related articles on the PHP Chinese website!