Basic introduction to Layui
In October 2016, the little-known layui gained a certain amount of attention with the popularity accumulated over the years by layer. It has been a month since the first version of 1.0.0 was released, and layui has carried out three small and medium-sized iterations. It does not cater to the current hot front-end mainstream. It intentionally or unintentionally avoids trends such as React/Vue and focuses on the original ecological development model, trying to become a front-end UI solution that is easier to get started and use in China. It is precisely because of this pursuit that we are not afraid of dangers and challenges. The next major version of layui has entered the development schedule. It will make up for the many shortcomings of the current version and may jump directly to 2.0. You can rest assured that it will be basically seamlessly compatible with 1.x.
Layui software features
- Return to nature
With the prosperity of the front-end community, we are all chasing it intentionally or unintentionally. However, Layui looks back at the beginning and embarks on the long journey back to his original nature. He is confident and brave, pursuing the original writing instructions and trying to interpret efficiency in the simplest way.
- Two-sided experience
It’s not just life that has two sides, it’s also Layui. One side is minimalist, the other side is rich. Minimalism is the appearance of what you see, and the simplicity of developing what you want. Abundance is the inner part carved with love, and it is the promise that comes at your fingertips. Everything is as it should be, simple and complete, a double experience.
- Sea of Stars
If it is still a sporadic fire now, then after strategizing, facing the east wind, it will be a blazing prairie fire, it will definitely be a hearty burning. Wait, when the autumn wind blows, the stars scatter in the sky. Look at the reincarnation of the four seasons, which is Layui's eternal obsession.
Layui quick start guide
After obtaining layui, fully deploy it to your project directory (or static resource server). You only need to introduce the following two files:
That’s right, you don’t need to worry about any other files. Because they (such as each module) are automatically loaded when they are finally used. Here is a basic getting started page:
1. Standardized usage (recommended)
If you want to use Layui components quickly, you can still introduce the script tag into your js file as usual, and then use layui components in your js file. But we recommend that you follow Layui’s module specifications and create your own module as an entry point:
The above index is index.js in your /res/js/modules/ directory, and its content should be as follows:
2. Simple and crude usage
If you think Layui’s modularity is still a bit cumbersome, it doesn’t matter. Layui takes into account the apes like you. We package and merge layui.js and all modules separately into a complete js file. You can directly import this file when using it. When you adopt this approach, you will not need to load the module through layui.use, you only need to use it directly, for example:
But you must know that this way of use means that Layui's modularity has lost its meaning. But it is undeniable that it is simpler than anything else.
Well, no matter which method you adopt, start using Layui to your heart’s content from now on! I hope this is a wonderful journey.
Layui FAQ
Question: How to use internal jQuery?
Answer: Since some of Layui’s built-in modules rely on jQuery, we use the most stable version of jQuery 1.11 as a built-in DOM module (the only third-party module). It will be loaded only if the module you are using depends on it, and if your page has already introduced jquery via script, it will not be loaded repeatedly. The built-in jquery module removes the global $ and jQuery and is a standard module that complies with the layui specification.
Question: Why does the form not display?
Answer: When you use a form, Layui will hide the original elements such as select, checkbox, and radio to beautify and modify them. But this depends on the form component, so you must load the form and execute an instance. It is worth noting that the Hover effect of navigation, Tab tab, etc. are the same (they need to rely on the element module)
Question: What is the most scientific way to load modules?
Answer: In fact, we have clearly stated in the module specification that you can use two modes: preloading and on-demand loading, but we do not recommend the latter (the document also explains why). Therefore, the way we strongly recommend is: you should put the module you need to use layui.use in the outermost layer of the code of your js file.
Layui update log
[Optimization] layui.use() method to support merge requests for loading non-built-in modules (if you use "non-modular loading" in the online environment, you can load only two files at most, namely: layui.all.js, main.js (the merge file of your extension module). This will greatly reduce file requests) #See the document for details
[New] layui.url() underlying method, used to objectify the pathname, search, and hash attributes in the url #See the documentation for details
[Optimization] Raster column spacing class .layui-col-space supports all even-numbered intervals in the range 1-30, and supports odd-numbered intervals of 1, 5, 15, and 25.
[Optimization] For the total row of the table component, if the interface directly returns the total row data, it will be read first, otherwise the front end will automatically total the current row data #See the documentation for details
[Fixed] The upload component cannot upload cross-domain in some cases due to the progress (progress bar) function of the previous version.
[Optimization] The upload component progress callback returns the currently triggered element object in the second parameter.
[Fix] The select component of the form module has an editable problem when lay-disabled and lay-search are shared.
[Fixed] Repeated loading problem when flow.load() is executed multiple times
[Fixed] The problem that the event method of the util component repeatedly binds events
[New] 28 font icons
Huajun editor recommends:
Layui has always been a commonly used software for most friends. Its dominance in the minds of netizens is obvious. The editor of Huajun Software Park recommends all users to download Layui. Come and download it. In addition, there areFastAdmin complete package,404 page template,ShopCMS,Music online analysis source code (simply build a music analysis network),Build and analyze NetEase paid song download websiteAvailable for download.
Useful
Useful
Useful