Layer plugin, layer

Layer plugin, layer

Recently, I am working on the company's official website. I have never been familiar with the layer plug-in, but I think it is easy to learn. Next I will share my learning experience.

Layer is a web pop-up layer component. After downloading the layer on the official website, deploy it to your project file (you cannot move the file structure in the layer because they are a combination that cannot be broken up ). You don't have to worry about what other files are doing. You only need to care about layer. js. Of course, the layer is based on jQuery. You need to introduce jquery1.8 or a later version before introducing the layer.

I. Basic parameters:

 

1. type -- base type layer (number type value, default value: 0)

0: Information Box 1: Page Layer 2: iframe Layer 3: loading Layer 4: tips Layer

 

2. title -- pop-up layer title

Title: "title content" title: ['title content', 'font-size: 18px; '] title: false (no title is displayed)

 

3. content -- content in the pop-up box

Content: 'content' content: "<div> hello world </div>'

 

4. area -- the width and height of the pop-up box

Area: '500px 'only sets the width. area: ['500px', '300px '] sets the width and height.

 

5. icon -- the pop-up layer icon (only applicable to information boxes and loading layers)

Value Range of the information box: 0 ~ 6. value range of the load layer: 0 ~ 2

 

6. btn -- the pop-up layer button settings (default: OK)

Btn: 'yes' btn: ['yes'. 'No']

 

7. closeBtn -- the layer close button is displayed (default: 1)

CloseBtn: 0 do not show closeBtn: 2

 

8. shade -- except for the pop-up layer (default: 0.3)

Shade: [0.8, '#393D49'] color shade: 0 not displayed

 

9. shadeClose -- click the effect of other parts except the pop-up layer (default: false)

Control the close of the pop-up layer (when you click the button except the pop-up layer)

ShadeClose: true click to close shadeClose: false click not to close

 

10. time -- the time required for the pop-up layer to automatically close (in milliseconds)

 

 

Ii. Common Methods

 

1. layer. open (options) Core Method

Options: Basic parameters

Layer. open ({content: 'content '})

 

2. layer. alert (content, options, yes) Information Box

Parameters:

Content: content,

Option: Basic Parameter

Yes Click OK to call back the function.

Layer. alert ('content', {icon: 1}, function (index, layerDom ){});

 

3. layer. confirm (content, option, yes, cancel) inquiry layer

Parameters:

Cancel: cancel button callback function

 

4. layer. msg (content, options, end) Prompt box

Parameters:

End: triggers a callback after the layer is destroyed.

 

5. layer. load (icon, option) load layer

 

6. layer. tips (content, follow, options) tip layer

 

7. layer. title (title, index) changes the layer title.

 

8. layer. tab (options) tab layer