Home > Article > Web Front-end > Getting started with Layui

Getting started with Layui

尚forward: 2019-11-14 11:25:229626browse

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.

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

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>

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

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>

Preloading:

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

Using the layui object:

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

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

css layui html JS 对象 ui

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to use layui frameworkNext article：How to use layui framework

See more

Getting started with Layui

Related articles