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

Editor to share with you how to use layui.layer independent components, 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 understand it!

Layer is still a masterpiece of layui. It is no accident that she has a wide audience. It is more than five years of persistence, continuous improvement and maintenance, continuous construction and promotion of community services, which makes apes spread spontaneously, and even become the strongest source of today's Layui.

At present, layer has become the most widely used web bullet layer component in China. The cumulative number of downloads on the official website of GitHub Natural Stars3000+, has reached 30 wages. about 200000 Web platforms are using layer.

Use the scene:

Because layer can be used independently, it can also be used modularly through Layui. So please choose according to your actual needs.

Layer is still a masterpiece of layui. It is no accident that she has a wide audience. It is more than five years of persistence, continuous improvement and maintenance, continuous construction and promotion of community services, which makes apes spread spontaneously, and even become the strongest source of today's Layui.

At present, layer has become the most widely used web bullet layer component in China. The cumulative number of downloads on the official website of GitHub Natural Stars3000+, has reached 30 wages. about 200000 Web platforms are using layer.

Use the scene:

Because layer can be used independently, it can also be used modularly through Layui. So please choose according to your actual needs.

1. Use layer as a standalone component

After introducing layer.js, you can use layer.msg ('hello') directly.

2. Use layer in layui

Layui.use ('layer', function () {var layer = layui.layer; layer.msg (' hello');})

Except for the difference above, everything else is exactly the same.

Basic parameters:

The basic parameters we mentioned mainly refer to the configuration items used when calling the method, such as: layer.open ({content:'}) layer.msg (', {time: 3}), where content and time are basic parameters, which exist in the form of key values. The basic parameters can be reasonably applied to any layer type. You do not need to configure all of them. Most of them are optional. Layer.open and layer.msg are the built-in methods. Note that from 2.3onwards, there is no need to load the extension module through layer.config

Type-basic layer Typ

Type: Number, default: 0

Layer provides five layer types. The values that can be passed in are: 0 (information box, default) 1 (page layer) 2 (iframe layer) 3 (load layer) 4 (tips layer). If you call layer.open ({type: 1}), type is required (except for the information box)

Title-title

Type: String/Array/Boolean. Default: 'information'.

Title supports three types of values. If you pass in an ordinary string, such as title:'I am the title', only the title text will be changed; if you also need to customize the title area style, you can title: ['text', 'font-size:18px;'], the second item of the array can write any css style; if you do not want to display the title bar, you can title: false

Content-content

Type: String/DOM/Array, default:''

The values that can be passed in by content are flexible. You can not only pass in normal html content, but also specify DOM, and it can vary from type to type. For example:

/! * if it is the page layer * / layer.open ({type: 1, content: 'pass in any text or html' / / where content is a normal String}); layer.open ({type: 1, content: $(' # id') / / where content is a DOM, note: it is best to store this element in the outermost layer of body, otherwise it may be affected by other relative elements}) / / Ajax gets $.post ('url', {}, function (str) {layer.open ({type: 1, content: str / / note that character concatenation is required if str is object. });}); /! * if it is the iframe layer * / layer.open ({type: 2, content: 'http://sentsin.com' / / where content is a URL, if you don't want iframe to have scroll bars, you can also content: [' http://sentsin.com', 'no']}) /! * if you are using layer.open to execute the tips layer * / layer.open ({type: 4, content: ['content','# id'] / / the second item of the array is the adsorbed element selector or DOM})

Skin-style class name

Type: String, default:''

Skin allows you to pass not only the built-in style class name of layer, but also your custom class name. This is a good entry point, which means you can easily customize different styles with the help of skin.

At present, the built-in skin of layer is: layui-layer-lanlayui-layer-molv. We will optionally build more in the future, but it is recommended that you define it yourself. Here is a simple example of a custom style

/ / use layer.open ({skin: 'demo-class'}) individually; / / use it globally. That is, all pop-up layers are adopted by default, but the priority of a single configuration skin is higher layer.config ({skin: 'demo-class'}) / / CSS body. Demo-class .layui-layer-title {background:#c00; color:#fff; border: none;} body. Demo-class .layui-layer-btn {border-top:1px solid # E9E7E7} body. Demo-class .layui-layer-btn a {background:#333 } body. Demo-class .layui-layer-btn .layui-layer-btn1 {background:#999;}... Body is added to ensure priority. You can use the Chrome debugging tool to define more style control layers and more areas.

Area-width and height

Type: String/Array, default: 'auto'

By default, layer is adaptive in both width and height, but when you just want to define the width, you can area: '500pxheight, the height is still adaptive. When you want to define the width and height, you can area: ['500px', '300px']

Offset-coordinate type: String/Array, default: vertical horizontal center

Offset is not set by default. But if you don't want to center vertically and horizontally, you can also make the following assignments:

Icon-Icon. Private parameters of the information box and the load layer

Type: Number, default:-1 (information box) / 0 (load layer)

The information box does not display icons by default. When you want to display icons, the default skin can be passed in 0-6 if it is a load layer, 0-2 can be passed in. Such as:

/ / eg1layer.alert ('Cool', {icon: 1}); / / eg2layer.msg ('not happy.' , {icon: 5}); / / eg3layer.load (1); / / loading of style 1

Btn-Button

Type: String/Array. Default: 'confirm'

When in info box mode, btn is a confirm button by default, other layer types are not displayed by default, and the load layer and tips layer are invalid. When you want to customize only one button, you can btn:'I see', when you want to define two buttons, you can btn: ['yes',' no']. Of course, you can also define more buttons, such as: btn: ['button 1 button,' button 2 button, button 3 button, …] The callback for button 1 is yes, and starting with button 2, the callback is btn2: function () {}, and so on. Such as:

/ / eg1 layer.confirm ('Nani?' , {btn: ['button 1', 'button 2', 'button 3'] / / can have unlimited buttons, btn3: function (index, layero) {/ / callback of button 3}}, function (index, layero) {/ / callback} of button 1, function (index) {/ / callback of button 2)) / eg2layer.open ({content: 'test', btn: [' button one', 'button two', 'button three'], yes: function (index, layero) {/ / callback of button [button one]}, btn2: callback / / return false of function (index, layero) {/ / button [button two] open the code to disable the button to close}, btn3: function (index) Layero) callback / / return false of the button [button 3] opens the code to disable the button to close}, cancel: function () {/ / the upper right corner closes the callback / / return false opens the code to disable the button to close}})

BtnAlign-Button arrangement type: String, default: r

You can quickly define the position of the buttons. The default value of btnAlign is r, that is, right alignment. The following assignments can be supported by this parameter:

CloseBtn-close button

Type: String/Boolean, default: 1

Layer provides two styles of close buttons, which can be displayed through configuration 1 and 2. If not, closeBtn: 0

Shade-Mask

Type: String/Array/Boolean. Default: 0.3.

That is, the area outside the bullet layer. The default is a black background of 0.3 transparency ('# 000'). If you want to define a different color, you can shade: [0.8,'# 393D49']; if you don't want to display the mask, you can shade: 0

ShadeClose-whether to click the mask to close

Type: Boolean, default: false

If your shade exists, then you can set the shadeClose to control the area outside the bullet layer to close.

Time-milliseconds required for automatic shutdown

Type: Number, default: 0

It is not automatically turned off by default. When you want to turn off automatically, you can time: 5000, which means to turn off automatically after 5 seconds. Note that the unit is millisecond (1 second = 1000 milliseconds).

Id-used to control the unique identification of the bullet layer

Type: String, default: null character

When this value is set, only one layer is allowed to pop up at the same time, regardless of the type of layer. Generally used in page layer and iframe layer mode

Anim-pop-up animation

Type: Number, default: 0

All of our appearance animations are based on CSS3. This means that all browsers except ie6-9 are supported. At present, the types of animation supported by anim are 0-6. If you don't want to display the animation, just set anim:-1. It is also important to note that versions prior to 3.0 used the shift parameter

IsOutAnim-turn off animation (added to layer 3.0.3)

Type: Boolean, default: true

By default, there is an excessive animation when you turn off the layer. If you don't want to turn it on, just set isOutAnim: false

Maxmin-maximum and minimum.

Type: Boolean, default: false

This parameter value is valid for type:1 and type:2. The maximum size button is not displayed by default. You need to display the configuration maxmin: true

Fixed-fixed

Type: Boolean, default: true

That is, whether the layer is fixed in the visual area when the mouse scrolls. If you don't want to, just set fixed: false

Resize-whether stretching is allowed

Type: Boolean, default: true

By default, you can drag in the lower right corner of the layer to stretch the size. If the function is shielded from the specified shell layer, you can set false. This parameter is not valid for loading and tips layers

Resizing-listen for window stretch action

Type: Function, default: null

When you drag and drop the lower right corner of the bounce layer to resize the form, it will be executed if you set the callback. The callback returns one parameter: the DOM object of the current layer

Resizing: function (layero) {console.log (layero);}

Scrollbar-whether to allow the browser to have scroll bars

Type: Boolean, default: true

Browser scrolling is allowed by default. If scrollbar: false is set, it will be blocked.

MaxWidth-maximum width

Type:, default: 360

Please note that the maxWidth setting is valid only when area: 'auto'.

ZIndex-cascading order

Type:, default: 19891014 (Xianxin's birthday)

Commonly used to resolve cascading conflicts with other components.

Move-the element that triggers the drag

Type: String/DOM/Boolean, default: '.layui-layer-title'

The default is to trigger the title area drag. If you want to define it separately, point to the element's selector or DOM. Such as move:'. Mine-move'. You also configure the setting move: false to disable dragging

MoveOut-whether drag and drop is allowed outside the window

Type: Boolean, default: false

By default, you can only drag and drop within the window. If you want to drag it out of the window, just set moveOut: true.

MoveEnd-callback method after dragging

Type: Function, default: null

MoveEnd is not triggered by default. If you need it, just set moveEnd: function (layero) {}. Where layero is the DOM object of the current layer

Tips-tips Direction and Color

Type: Number/Array, default: 2

Private parameters for the tips layer. Support the upper right and lower left four directions, through 1-4 direction setting. For example, tips: 3 indicates that it appears below the element. Sometimes you may also define some colors, you can set tips: [1,'# c00']

TipsMore-whether multiple tips is allowed

Type: Boolean, default: false

Allowing multiple means that the previous tips layer will not be destroyed. Open via tipsMore: true

Success-successful callback method after layer popup

Type: Function, default: null

When you need to execute some statements when the layer is created, you can use this callback. Success takes two parameters, which are the current layer DOM current layer index. Such as:

Layer.open ({content: 'test callback', success: function (layero, index) {console.log (layero, index);}})

Yes-determine the button callback method

Type: Function, default: null

The callback takes two parameters, which are the current layer index and the current layer DOM object. Such as:

Layer.open ({content: 'test callback', yes: function (index, layero) {/ / do something layer.close (index); / / if yes callback is set, manual shutdown}})

Cancel-callback triggered by the close button in the upper right corner

Type: Function, default: null

This callback takes two parameters, namely, the current layer index parameter (index) and the current layer DOM object (layero). The shutdown is automatically triggered by default. If you don't want to turn it off, return false is fine, such as

Cancel: function (index, layero) {if (confirm ('are you sure you want to close?)) {/ / only when you click on the confirm box, the layer will close layer.close (index)} return false;} above is all the content of the article "how to use layui.layer Independent components". 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.