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

Editor to share with you how to use the layui framework, 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!

What is layui?

Layer, a web pop-up window (layer) solution (js component) that you can think of, is a virtuous author. Layer focuses on the flexible customization of users, providing power for the habits of different people. The significance is that you can make your page have a richer and convenient operation experience, which can be easily achieved by simply configuring the relevant parameters during the call. -- from Baidu Encyclopedia

According to the number of users of layer components, you can see that the layui framework is very good, so let's start the journey of layui!

The structure of Layui

├─ css / / css directory │ │─ modules / / module css directory (usually if the module is relatively large, we will extract it separately For example, the following three:) │ │ ├─ laydate │ │ ├─ layer │ │ layim │ └─ layui.css / / core style file ├─ font / / font icon directory ├─ images / / picture resource directory (currently only layim and editor used GIF emoticons) │─ lay / / module core directory │ └─ modules / / module components │─ layui. Js / / basic core library └─ layui.all.js / / contains the merged file of layui.js and all modules

Layui built-in module

The following is a list of several component modules that I feel are more important, after all, they are not dedicated to the front end.

Get Layui

It is obtained through the official website of Layui. For more information, please refer to the official website of layui.

The Beauty of Layer bullet layer

We can also get it by visiting Layer, get the layer component and import it into the project. For the specific steps, refer to the following figure:

1. Introduce jQuery framework into the page

two。 Completely copy the downloaded layer folder into the project

3. Import layer.js files under the layer directory

4. Start the journey of layer shell layer

First experience

The beauty of the layer layer $(function () {$("# btn"). Click (function () {/ / query box layer.confirm ('what do you think of front-end development?' , {btn: ['important', 'weird'] / / button}, function () {layer.msg ('really important', {icon: 1}) }, function () {layer.msg ('you can do that', {time: 20000, / / automatically close btn after 20s: ['got it', 'got it']}) });})

This is only a simple demonstration. For more implementation of the bullet layer, please refer to the specific code posted on the Layer official website.

/ / New experience of layer.alert ('content') / / third-party extended skin layer.alert ('content', {icon: 1, skin: 'layer-ext-moon' / / this skin is extended by layer.seaning.com friendship. For skin extension rules, check here for}) / / query box layer.confirm ('what do you think of front-end development?' , {btn: ['important', 'bizarre'] / / button}, function () {layer.msg ('really important', {icon: 1});}, function () {layer.msg ('can do so', {time: 20000, / / automatically close btn after 20s: ['got it', 'got it']}); / / prompt layer layer.msg ('playing with life') / / Dark green dark blue wind layer.alert ('dark green style, click to confirm dark blue', {skin: 'layui-layer-molv' / / style class name, closeBtn: 0}, function () {layer.alert (' even bar dark blue style', {skin: 'layui-layer-lan', closeBtn: 0, anim: 4 / / animation type});}) / / capture page layer.open ({type: 1, shade: false, title: false, / / do not display the title content: $('.layer _ notice'), / / capture elements. Note: it is best to store the specified element in the outermost layer of body, otherwise it may be affected by other relative elements: cancel: function () {layer.msg (' capture is from the element that already exists on the page Package layer structure', {time: 5000, icon:6}) }}); / / Page layer layer.open ({type: 1, skin: 'layui-layer-rim', / / with border area: [' 420pxseam, '240px'], / / width and height content:' html content'}) / / Custom page layer.open ({type: 1, skin: 'layui-layer-demo', / / style class name closeBtn: 0, / / do not display close button anim: 2, shadeClose: true, / / turn on mask close content:' content'}); / / tips layer layer.tips ('Hi, I am tips', 'adsorber element selector, such as # id') / / iframe layer layer.open ({type: 2, title: 'layer mobile page', shadeClose: true, shade: 0.8, area: ['380pxframes,' 90%'], content: 'mobile/' / / iframe url}) / / iframe window layer.open ({type: 2, title: false, closeBtn: 0, / / does not display the close button shade: [0], area: ['340pxblank,' 215px'], offset: 'rb', / / pop-up time: 2000 in the lower right corner, / / automatically close anim: 2, content: [' test/guodu.html', 'no'], / / url of iframe after 2 seconds No stands for not displaying scroll bars end: function () {/ / this is used to demonstrate layer.open ({type: 2, title:'a lot of times, we want to maximize the view, like this page.' , shadeClose: true, shade: false, maxmin: true, / / turn on the maximize and minimize button area: ['893pxrabbit,' 600px`], content:'/ / fly.layui.com/'});}}); / / load layer var index = layer.load (0, {shade: false}) / / 0 represents the loaded style, and supports 0-2//loading layer var index = layer.load (1, {shade: [0.1graded transparent white background}); / / small tipslayer.tips ('I'm another tips, but I look a little different from the one before.' , tips: [1,'# 3595CC'], time: 4000}); / / prompt layer layer.prompt ({title: 'enter any password and confirm', formType: 1}, function (pass, index) {layer.close (index); layer.prompt ({title: 'write anything and confirm', formType: 2}, function (text, index) {layer.close (index) Layer.msg ('demo is over! Your password:'+ pass +'

You finally wrote:'+ text);});}); / / tab layer layer.tab ({area: ['600pxregions,' 300px`], tab: [{title: 'TAB1', content:' content 1'}, {title: 'TAB2', content:' content 2'}, {title: 'TAB3', content:' content 3'}]}) / / album layer $.getJSON ('test/photos.json?v='+new Date, function (json) {layer.photos ({photos: json / / format see the manual pages of API documents, anim: 5 / / 0-6, specify the type of pop-up image animation, default random});}); these are all the contents of the article "how to use the layui Framework". 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.