Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use layui, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Get Layui

You can download the latest version of Layui from the home page of the official website, or you can get the open source package of Layui through GitHub. At present, only these two resource channels are maintained simultaneously. In general, if you are used for an actual project, it is recommended that you download it directly from the official website. The structure built by layui (that is, the package you get)

├─ css / / css directory │ └─ modules / / module css directory (usually if the module is relatively large We will separately extract) │ ├─ laydate │ ├─ layer │ │ └─ default │ └─ layim │ └─ skin ├─ font / / font icon directory ├─ images / / picture resource directory (some emoticons, etc.) │ └─ face └─ lay / / JS directory │ ├─ dest / / merged complete module │ └─ modules / / each module / component └─ layui.js

Get started quickly

After you get the layui and 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

That's right, you don't have to worry about any other files. Because they (such as modules) are only loaded automatically when they are finally used. This is a basic getting started page:

Start using Layui / / and generally write layui.use directly in a js file (['layer',' form'], function () {var layer = layui.layer, form = layui.form (); layer.msg ('Hello World');})

Standardized usage (recommended)

If you want to use Layui components quickly, you should introduce the script tag into your js file as usual, and then use layui components in your js file. However, we recommend that you follow the Layui module specification and create your own module as an entry:

Layui.config ({base:'/ res/js/modules/' / / your module directory}). Use ('index'); / / load entry

The above index is the index.js in your / res/js/modules/ directory, and its contents should be as follows:

/ * * the project JS main entry takes Layui-dependent layer and form modules as an example * * / layui.define (['layer',' form'], function (exports) {var layer = layui.layer, form = layui.form (); layer.msg ('Hello World'); exports (' index', {}); / / Note: this is the core of the module output, and the module name must be the same as the module name in use).

Simple and rough usage

If you think the modularization of Layui is still a little verbose, it doesn't matter. Layui takes into account apes like you, we will layui.js and all modules separately packaged and merged into a complete js file, when using this file can be introduced directly. When you use this method, you no longer need to load the module through layui.use, you can just use it, such as:

;! function () {/ / when layui.all.js is used, there is no need to execute the layui.use () method var from = layui.form (), layer = layui.layer; / /... } ()

But you have to know that this way of use means that the modularization of Layui has lost its meaning. But there is no denying that it is easier than anything else.

The above is all the contents of this article "how to use layui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.