[knowledge sharing] installation and use of layui

Time:2021-5-10

Installation and use of layui

Introduction to layui

Layui (homophonic: class UI) is a front-end UI framework written with its own module specification, which follows the writing and organization form of native HTML / CSS / JS, with very low threshold, and can be used immediately.

The framework, developed by Chinese people and manufactured in 16 years, mainly provides a lot of good-looking and convenient styles, and is basically ready to use. It is similar to bootstrap, but the great advantage of the framework is that it defines a lot of style interfaces for front-end and back-end interaction, such as paging table. It only needs to configure the interface at the front end, and the back end returns data according to the defined interface rules, Can complete the display of the page, greatly reducing the development cost of back-end staff.

Official website:https://www.layui.com

Official document:https://www.layui.com/doc/

Features of layui

(1) Layui is a lightweight framework, simple and beautiful. It is suitable for the development of back-end mode, and it has a very good effect on the server page.

(2) Layui is a UI framework for back-end developers based on DOM driver.

Download and use

  1. stayHome page of official websiteDownload to the latest version of layui. The directory structure is as follows:

    – CSS / / CSS directory
    │   │ – modules / / module CSS directory (generally, if the module is relatively large, we will extract it separately, such as the following three:)
    │  │  ├─laydate
    │  │  ├─layer
    │  │  └─layim
    │   └ – layui.css / / core style file
    ├─font  // Font Icon directory
    ζ – images / / image resource directory (currently only GIF expressions used by layim and editor)
    │ – lay / / module core directory
    │   └ – modules / / module components
    │ – layui.js / / basic core library
    └ – layui.all.js / / contains the consolidated file of layui.js and all modules

  2. After obtaining the layui, you can deploy it completely (copy it into the project) to your project directory. You only need to import the following two files:

./layui/css/layui.css
. / layui / layui.js / / prompt: if the non modular mode is adopted, it can be changed to. / layui / layui.all.js

  1. Basic introductory page

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
< title > start using layui < / Title >
<link rel=”stylesheet” href=”layui/css/layui.css”>
</head>
<body>

<!– Your HTML code — >

<script></script>
<script>
//Modules and callback functions
//It is usually written directly in a JS file
layui.use([‘layer’, ‘form’], function(){
var layer = layui.layer
,form = layui.form;

layer.msg(‘Hello World’);
});
</script>
</body>
</html>

  1. You also need to declare what you want to usemodularandCallback function. Refer to the official document and choose the effect you want.

    For example:

    <script>
    //Note: the navigation depends on the element module, otherwise the functional operation cannot be performed
    layui.use(‘element’, function(){
    var element = layui.element;

    //…
    });
    </script>

Page elements

layout

Layout container

Fixed width

Place the grid in a grid withclass=”layui-container”In order to fix the width in the device above the small screen and make the column controllable.

<div class=”layui-container”>
<div class=”layui-row”>
……
</div>
</div>

Full width

The width of the container may not be fixed. Place a grid or other element in aclass=”layui-fluid”Then the width will not be fixed, but 100% adapted

<div class=”layui-fluid”>
……
</div>

grid system

In order to enrich the layout of web pages, simplify the coupling of HTML / CSS code, and improve the adaptability of multi terminal, layui introduces a grid system with responsive ability. The container is divided into 12 equal parts, and 4 * 12 CSS arrangement classes are preset, which play their respective roles in four different screens: mobile device, tablet and desktop.

Grid layout rules
  1. uselayui-rowTo define lines, such as:

    <div class=”layui-row”></div>

  2. Use similarlayui-col-md*Such a default class defines a set of columns and places them in rows. Among them:

    • variablemdIt represents the mark under different screens
    • variable*Represents the 12 grade score occupied by the column (such as 6 / 12). The optional values are 1-12
    • If the sum of the “equal value” of multiple columns is equal to 12, the row is just full. If it is greater than 12, the extra columns will automatically start a new row.
  3. Columns can have up to four different combinations at the same time_ xs_( Ultra small screen, such as mobile phone)_ sm_( Small screen, such as tablet)_ md_( Desktop medium screen)_ lg_( Desktop large screen).
  4. You can append a similarlayui-col-space5_、 _layui-col-md-offset3Such a default class defines the spacing and offset of columns.
  5. You can fill in the column element with any element of your own

Example:

<h3>General layout (take medium screen desktop as an example)</h3>
<div class=”layui-row”>
<div class=”layui-col-md9″ style=”background-color: #00F7DE;”>
Your content 9 / 12
</div>
<div class=”layui-col-md3″ style=”background-color: rosybrown;”>
Your content 3 / 12
</div>
</div>

Responsive rule

The responsive ability of the grid benefits from the strong support of CSS3 media queries, so as to adapt to four types of screens with different sizes.

Ultra small screen (mobile phone < 768px)

Small screen (flat panel ≥ 768px)

Medium screen (desktop ≥ 992px)

Large screen (desktop ≥ 1200px)

_. layui-container_ Value of

auto

750px

970px

1170px

sign

xs

sm

md

lg

The column corresponds to the equal value of class * from 1 to 12

layui-col-xs*

layui-col-sm*

layui-col-md*

layui-col-lg*

Total number of columns

12

12

12

12

Response behavior

Always arrange horizontally according to the set proportion

It is arranged horizontally under the current screen, and stacked if the screen size is lower than the critical value

It is arranged horizontally under the current screen, and stacked if the screen size is lower than the critical value

It is arranged horizontally under the current screen, and stacked if the screen size is lower than the critical value

<h3>Different performance of tablet and desktop:</h3>
<div class=”layui-row”>
<div class=”layui-col-sm6 layui-col-md4″
style=”background-color: thistle”>
Tablet ≥ 768px: 6 / 12 | desktop ≥ 992px: 4 / 12
</div>
</div>

<div class=”layui-row”>
<div class=”layui-col-sm4 layui-col-md6″
style=”background-color: mediumaquamarine;”>
Tablet ≥ 768px: 4 / 12 | desktop ≥ 992px: 6 / 12
</div>
</div>

<div class=”layui-row”>
<div class=”layui-col-sm12 layui-col-md8″
style=”background-color: coral”>
Tablet ≥ 768px: 12 / 12 | desktop ≥ 992px: 8 / 12
</div>
</div>

Column margin

Set the spacing between columns through the default class of column spacing. The leftmost column in a row will not have a left margin, and the rightmost column will not have a right margin. Column spacing not only ensures the beautiful layout, but also further ensures the fine width of the column. We preset 12 different sizes of margins based on the commonly used margins of web pages

/All even intervals between columns in 1px-30px interval and odd intervals of 1px, 5px, 15px and 25px are supported/
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30

Example:

<h3>Column spacing</h3>
<div class=”layui-row layui-col-space10″>
<div class=”layui-col-md4″ >
<!– You need to add a div — > Layer in layui-col-md4
<div style=”background-color: #009688;”>
1/3
</div>
</div>
<div class=”layui-col-md4″>
<div style=”background-color: burlywood;”>
1/3
</div>
</div>
<div class=”layui-col-md4″>
<div style=”background-color: silver;”>
1/3
</div>
</div>
</div>

Note:

  1. Layui col space: it doesn’t work after setting, mainly becauseThe setting is paddingThat is to sayShrink inwardSo setting the background color padding also adds color, which looks like there is no spacing. You can add a div in it to achieve the goal.
  2. Generally, the spacing is not higher than 30px. If it exceeds 30, column offset is recommended.
Column offset

Add a similar value to the columnlayui-col-md-offsetTo shift the column to the right. amongThe symbol represents the number of columns occupied by the offset, which can be selected from 1 to 12. For example:_ layui-col-md-offset3_, That is to say, under “medium desktop screen”, let the column offset 3 column widths to the right

<h3>Column offset</h3>
<div class=”layui-row”>
<div class=”layui-col-md4″ style=”background-color: rosybrown;”>
4/12
</div>
<div class=”layui-col-md4 layui-col-md-offset4″
style=”background-color: cornflowerblue;”>
Offset 4 columns to the far right
</div>
</div>

Note: column offset can be set according to different screen standards, which is valid under the current screen. When it is lower than the specified critical value of desktop screen, it will be stacked.

Column nesting

The grid can be nested infinitely. In the column element (_ layui-col-md*_) Insert row element (_ layui-row_), The nesting is completed.

<h3>Column nesting</h3>
<div class=”layui-row layui-col-space5″>
<div class=”layui-col-md5″ style=”background-color: thistle;”>
<div class=”layui-row”>
<div class=”layui-col-md3″ style=”background-color: burlywood;” >
Internal column
</div>
<div class=”layui-col-md5″ style=”background-color: indianred;”>
Internal column
</div>
<div class=”layui-col-md4″ style=”background-color: mediumaquamarine;”>
Internal column
</div>
</div>
</div>
</div>

Basic elements

Button

usage

Set the_ class=”layui-btn”_, Create a base button. By appending the format as_ layui-btn-{type}_ Class to define other button styles.

<!– Basic button — >
A standard button
A jump button
< div class = “layui BTN” > one button < / div >

theme

name

combination

original

class=”layui-btn layui-btn-primary”

default

class=”layui-btn”

Versatile

class=”layui-btn layui-btn-normal”

Warm color

class=”layui-btn layui-btn-warm”

warning

class=”layui-btn layui-btn-danger”

Disable

class=”layui-btn layui-btn-disabled”

Example:

<!– Buttons with different themes — >
< button class = “layui BTN” > Default button < / button >
< button class = “layui BTN layui BTN primary” > original button < / button >
< button class = “layui BTN layui BTN normal” > versatile button < / button >
< button class = “layui BTN layui BTN warm” > warm button < / button >
< button class = “layui BTN layui BTN danger” > warning button < / button >
< button class = “layui BTN layui BTN disabled” > disable button < / button >

size

size

combination

large

class=”layui-btn layui-btn-lg”

default

class=”layui-btn”

small-scale

class=”layui-btn layui-btn-sm”

Mini

class=”layui-btn layui-btn-xs”

<!– Buttons of different sizes — >
< button class = “layui BTN layui BTN primary layui BTN LG” > large < / button >
< button class = “layui BTN” > Default < / button >
< button class = “layui BTN layui BTN SM layui BTN danger” > small < / button >
< button class = “layui BTN layui BTN XS” > Mini < / button >

fillet

layui-btn-radius

< button class = “layui BTN layui BTN radius” > Default button < / button >
< button class = “layui BTN layui BTN primary layui BTN radius” > original button < / button >
< button class = “layui BTN layui BTN normal layui BTN radius” > versatile button < / button >
< button class = “layui BTN layui BTN warm layui BTN radius” > warm button
< button class = “layui BTN layui BTN danger layui BTN radius” > warning button < / button >
< button class = “layui BTN layui BTN disabled layui BTN radius” > disable button < / button >

Icon

<button type=”button” class=”layui-btn”>
 add
</button>

<button type=”button” class=”layui-btn layui-btn-sm layui-btn-primary”>
Refresh
</button>

Navigation

Navigation generally refers to the set of page guiding channels, which are mostly presented in the form of menu, and can be applied to the head and side. The structure of bread crumbs is simple and supports custom separator.

Dependent loading module:element

Implementation steps:

  1. Resources introduced

    <link rel=”stylesheet” href=”layui/css/layui.css”>
    <script></script>

  2. Dependency loading module

    <script type=”text/javascript”>
    //Note: the navigation depends on the element module, otherwise the functional operation cannot be performed
    layui.use(‘element’, function(){
    var element = layui.element;

    });
    </script>

  3. Displays the navigation of the specified type
lateral navigation

<ul class=”layui-nav”>
<li class=”layui-nav-item”>Latest events</li>
<li class=”layui-nav-item layui-this”>product</li>
<li class=”layui-nav-item”>big data</li>
<li class=”layui-nav-item”>
Solution
<dl class=”layui-nav-child”> <!– Secondary menu — >
<dd>Mobile module</dd>
<dd>Background template</dd>
<dd>E-commerce platform</dd>
</dl>
</li>
<li class=”layui-nav-item”>community</li>
</ul>

Vertical / side navigation

<ul class=”layui-nav layui-nav-tree” >
<!– Side navigation: < UL class = “layui NAV layui NAV tree layui NAV side” > — >
<li class=”layui-nav-item layui-nav-itemed”>
Expand by default
<dl class=”layui-nav-child”>
<dd>Option 1</dd>
<dd>Option 2</dd>
<dd>Jump</dd>
</dl>
</li>
<li class=”layui-nav-item”>
Solution
<dl class=”layui-nav-child”>
<dd>Mobile module</dd>
<dd>Background template</dd>
<dd>E-commerce platform</dd>
</dl>
</li>
<li class=”layui-nav-item”>product</li>
<li class=”layui-nav-item”>big data</li>
</ul>

The HTML structures of horizontal, vertical and side navigation are exactly the same, but the differences are as follows:

Horizontal navigation: layui nav
Vertical navigation needs to add class: layui NAV tree
Class: layui NAV tree, layui NAV side should be added for side navigation

Navigation theme

Add CSS background class to the navigation to make the navigation present different theme colors

<!– For example, to define a navigation with dark green background — >
<ul class=”layui-nav layui-bg-move” >

</ul>

Other background topics supported by horizontal navigation are:_ layui-bg-cyan_( Tibetan green)_ layui-bg-molv_( Dark green)_ layui-bg-blue_( Other background topics supported by vertical navigation are:_ layui-bg-cyan_( (Tibetan)

crumbs

<span class=”layui-breadcrumb”>
home page
international news
Asia Pacific Region
< cite > text
</span>

You can also set the propertieslay-separator=””Customize the separator. For example:

<span class=”layui-breadcrumb” lay-separator=”-“>
home page
international news
Asia Pacific Region
< cite > text
</span>

tab

Navigation menu can be applied to the head and side, support responsive, support delete tab and other functions.

Dependent loading module:element

Implementation steps
  1. Resources introduced

    <link rel=”stylesheet” href=”layui/css/layui.css”>
    <script></script>

  2. Dependency loading module

    <script type=”text/javascript”>
    //Note: the tab depends on the element module, otherwise the functional operation cannot be performed
    layui.use(‘element’, function(){
    var element = layui.element;

    });
    </script>

  3. Load HTML

    <div class=”layui-tab”>
    <ul class=”layui-tab-title”>
    < Li class = “layui this” > website settings</li>
    <li>User management</li>
    <li>Authority assignment</li>
    <li>Commodity management</li>
    <li>Order management</li>
    </ul>
    <div class=”layui-tab-content”>
    < div class = “layui tab item layui show” > content 1 < / div >
    < div class = “layui tab item” > content2 < / div >
    < div class = “layui tab item” > content3 < / div >
    < div class = “layui tab item” > content4 < / div >
    < div class = “layui tab item” > Content5 < / div >
    </div>
    </div>

Tab style

Default style: layui tab
Simple style needs to add class: layui tab brief
The card style needs to add class: layui tab card

Tab with delete

You can set properties on the parent containerlay-allowClose=”true”To allow the tab to be removed

<div class=”layui-tab” lay-allowClose=”true”>
<ul class=”layui-tab-title”>
< Li class = “layui this” > website settings</li>
<li>User management</li>
<li>Authority assignment</li>
<li>Commodity management</li>
<li>Order management</li>
</ul>
<div class=”layui-tab-content”>
< div class = “layui tab item layui show” > content 1 < / div >
< div class = “layui tab item” > content2 < / div >
< div class = “layui tab item” > content3 < / div >
< div class = “layui tab item” > content4 < / div >
< div class = “layui tab item” > Content5 < / div >
</div>
</div>

form

Conventional usage
<colgroup>
<col width=”150″>
<col width=”200″>
<col>
</colgroup>

Nickname? Joining time autograph
Virtuous heart 2016-11-29 Life is like a practice
Xu Xianxin 2016-11-28 In thousands of people, meet the people you meet, in thousands of years, in the boundless wilderness of time
Basic attributes

Property name

Property value

remarks

lay-even

nothing

For openingInterlacedBackground, which can be used with other properties

Lay skin = attribute value

Line border style row border style nob borderless style

If you use the default style, do not set this property

Lay size = attribute value

SM (small size) LG (large size)

If you use the default size, do not set this property

The basic attributes you need are written on the table tab, for example:

<!– A large table with interlaced background and row border style

<colgroup>
<col width=”150″>
<col width=”200″>
<col>
</colgroup>

Nickname? Joining time autograph
Virtuous heart 2016-11-29 Life is like a practice
Xu Xianxin 2016-11-28 In thousands of people, meet the people you meet, in thousands of years, in the boundless wilderness of time

form

Dependent loading module:form

  1. Set in a containerclass=”layui-form”To identify a block of form elements

    <form class=”layui-form” action=””>

    </form>

  2. Basic row block structure, which provides responsive support. It can be changed to another structure, but it must be defined in the outer container_ class=”layui-form”_, Form module can work normally.

    <div class=”layui-form-item”>
    < label class = “layui form label” > label area < / label >
    <div class=”layui-input-block”>
    Original form element area
    </div>
    </div>

Input box

< input type = “text” name = “title” required lay verify = “required” placeholder = “please enter title” autocomplete = “off” class = “layui input” / >

  • Required: required field for registering browser
  • Lay verify: register the type that the form module needs to verify
  • Class = “layui input”: General CSS class provided by layui.css
Drop down selection box

<select name=”city” lay-verify=””>
< option value = > please select a city < / option >
< option value = “010” > Beijing < / option >
< option value = “021” > Shanghai < / option >
< option value = “0571” > Hangzhou < / option >
</select>

  • Properties_ selected_ Default items can be set
  • Properties_ disabled_ Enable / disable, both select and option tags support

<select name=”city” lay-verify=””>
< option value = “010” > Beijing < / option >
< option value = “021” disabled > Shanghai (disable effect) < / option >
< option value = “0571” selected > Hangzhou < / option >
</select>

  • Can passoptgroupLabel group select

<select name=”quiz”>
< option value = > please select < / option >
< optgroup label = “city memory” >
< option value = “the first city you work in” > the first city you work in</ option>
</optgroup>
< optgroup label “>”
< option value = “your job number” > your job number</ option>
< option value = “your favorite teacher” > your favorite teacher</ option>
</optgroup>
</select>

  • By setting propertieslay-searchTo turn on the search matching function

<select name=”city” lay-verify=”” lay-search>
<option value=”010″>layer</option>
<option value=”021″>form</option>
<option value=”0571″ selected>layim</option>
</select>

check box

<h2>Default style:</h2>
<input type=”checkbox” name=”” checked>
<input type=”checkbox” name=””>
<input type=”checkbox” name=”” disabled>

<h2>Original style:</h2>
<input type=”checkbox” name=”” lay-skin=”primary” checked>
<input type=”checkbox” name=”” lay-skin=”primary”>
<input type=”checkbox” name=”” lay-skin=”primary” disabled>

  • Properties_ title_ Customizable text (warm tip: if you only want to display the check box, you don’t need to set the title)
  • Properties_ checked_ Default selection can be set
  • Properties_ lay-skin_ The style of the check box can be set (original style: lay skin = primary)
  • Settings_ value=”1″_ It can be customized. Otherwise, the default on value will be returned when it is selected
switch

Set the check box to the check boxlay-skin=”switch”Formed a switch style

<input type=”checkbox” name=”xxx” lay-skin=”switch”>
<input type=”checkbox” name=”yyy” lay-skin=”switch” lay-text=”ON|OFF” checked>
< input type = “checkbox” name = “zzz” lay skin = “switch” lay text = “on | off” >
<input type=”checkbox” name=”aaa” lay-skin=”switch” disabled>

  • Properties_ checked_ Default on can be set
  • Properties_ disabled_ Enable disable
  • Properties_ lay-text_ You can customize the text of the switch in two states (the two texts are separated by “|”
  • Settings_ value=”1″_ It can be customized. Otherwise, the default on value will be returned when it is selected
Radio

<input type=”radio” name=”sex” value=”nan”>
<input type=”radio” name=”sex” value=”nv” checked>
<input type=”radio” name=”sex” value=”” disabled>

  • Properties_ title_ Customizable text
  • Properties_ disabled_ Enable disable
  • Settings_ value=”xxx”_ It can be customized. Otherwise, the default on value will be returned when it is selected
Text field

< textarea name = “remark” required lay verify = “required” placeholder = “please enter your personal profile” class = “layui textarea” > < / textarea >

  • _ class=”layui-textarea”_: General CSS class provided by layui.css
Assemble in line forms

<div class=”layui-form-item”>
<div class=”layui-inline”>
< label class = “layui form label” > range < / label >
<div class=”layui-input-inline” style=”width: 100px;”>
<input type=”text” name=”price_min” placeholder=”¥”
autocomplete=”off” class=”layui-input”>
</div>
<div class=”layui-form-mid”>-</div>
<div class=”layui-input-inline” style=”width: 100px;”>
<input type=”text” name=”price_max” placeholder=”¥”
autocomplete=”off” class=”layui-input”>
</div>
</div>
</div>

  • _ class=”layui-inline”_: Define outer layer and inner row
  • _ class=”layui-input-inline”_: Define inner layer and inner line
Ignore beautification rendering

You can add attributes to form elementslay-ignoreAfter setting, the label will not be beautified, that is, the system style will be retained.

<input type=”radio” name=”sex” value=”nan” lay-ignore>

Form box style

By appendinglayui-form-paneTo set the box style of the form.

<form class=”layui-form layui-form-pane” action=””>
<!–
The internal structure is the same. It is worth noting that the combination of check box / switch / radio box needs to add additional pane attribute (otherwise it will look awkward), such as:
–>
<div class=”layui-form-item” pane>
< label class = “layui form label” > radio box < / label >
<div class=”layui-input-block”>
< input type = Radio “name = sex” value = male “>
< input type = “radio” name = “sex” value = “female” checked >
</div>
</div>
</form>

Component examples

Popup

Module loading Name:_ layer_, Independent version:layer.layui.com

Usage scenarios

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

scene

Preparation before use

Call mode

  1. Use as a stand-alone component

If you just want to use layer alone, you can golayerDownload the package from the official website of the independent version. You need to introduce it on your page_ jQuery_ 1.8 or above, and introduced_ layer.js_。

After introducing layer.js through script tag, you can use it directly.

  1. Layui modular use

If you are using layui, you can download the layui framework directly from the official website. There is no need to introduce jQuery and layer. JS, but it needs to be introduced_ layui.css_ And_ layui.js_

Through_ layui.use(‘layer’, callback)_ Load module

  1. Use layer as a stand-alone component

    <!– After introducing layer.js, you can use it directly — >
    <script></script>
    <script>
    layer.msg(‘hello’);
    </script>

  2. Using layer in layui

    layui.use(‘layer’, function(){
    var layer = layui.layer;

    layer.msg(‘hello’);
    });

Basic parameters
  1. Type – basic layer type

    Type: number, default: 0

    The values that can be passed in are:
    0 (information box, default)
    1 (page layer)
    2 (iframe layer)
    3 (loading layer)
    4 (TIPS layer)

  2. Title – title

    Type: string / array / Boolean, default: ‘info’

    Title supports three types of values:
    If an ordinary string is passed in, such as Title: ‘I am the title’, then only the title text will be changed;
    If you need to customize the style, you can use Title: [‘text ‘,’font’- size:18px; ‘], The second item of array can write any CSS style;
    If you don’t want to display the title bar, you can use Title: false;

  3. Content – content

    Type: string / DOM / array, default:

    The value that content can be passed in is flexible. It can not only pass in ordinary HTML content, but also specify dom.

    /Information box/
    layer.open({
    type:0,
    Title: “system message”,
    //Content can pass in any text or HTML
    content:”Hello”
    });

    /Page layer/
    layer.open({
    type:1,
    Title: “system message”,
    //Content can pass in any text or HTML
    content:”<div style=’height:100px;width:200px’>Hello</div>”
    });

    / iframe /
    layer.open({
    type:2,
    Title: “system message”,
    //Content is a URL. If you don’t want scroll bar to appear in iframe, you can also use content: [‘url ‘,’No’]
    content:”http://www.baidu.com”
    // content:[“http://www.baidu.com”,’no’]
    });

    /Tips layer/
    layer.open({
    type: 4,
    Content: [content ‘,’ #id ‘] / / the second item in the array is the adsorption element selector or dom
    });

  4. Area – width and height

    Type: string / array, default: ‘auto’

    By default, the layer is adaptive in both width and height.
    When defining the width, you can use area: ‘500px’, and the height is still adaptive.
    When width and height are defined, you can define area: [‘500px ‘,’300px’].

  5. Icon – Icon

    Note: private parameters of information box and loading layer.

    Type: number, default: – 1 (info box) / 0 (load layer)

    The information box does not display icons by default. When you want to display the icon, the default layer can pass in 0-6. If it is a loading layer, you can pass in 0-2.

    // eg1
    Layer. Alert (‘cool ‘, {Icon: 1});
    // eg2
    Layer.msg (‘not happy. ‘{ icon: 5});
    // eg3
    layer.load(1); // Loading of style 1

  6. Examples

    // eg1
    Layer. Alert (‘nice to meet you ‘, {Icon: 6});

    // eg2
    Layer. MSG (‘Would you like to be my friend? ‘{
    Time: 0, / / do not close automatically
    BTN: [‘Certainly willing ‘,’ruthlessly refuse’], / / button
    yes: function(index){
    layer.close(index); // Close the current pop-up box
    Layer.msg (‘Hello, new friend! “{
    Icon: 6, / / Icon
    BTN: [‘happy ‘,’happy’]
    });
    }
    });

    // eg3
    Layer. MSG (‘This is a common pop-up layer ‘);

    // eg4
    layer.msg(‘So sad /(ㄒoㄒ)/~~’, {icon: 5});

    // eg5
    Layer. MSG (‘playing with life loading… =  ̄ ω  ̄=’, function(){
    //Operation after closing
    layer.msg(‘(⊙o⊙)?’);
    });

Date and time selection

Module loading Name:_ laydate_, Independent version:http://www.layui.com/laydate/

Laydate contains a large number of updates, mainly including:_ Year selector_ Date selector_ Date selector_ Time selector_ Date time selector_ Five types of choice.

Quick use

Just like layer, you can use laydate in the layui or directly use the independent version of laydate. Please choose according to the actual needs.

scene

Preparation before use

Call mode

  1. Layui modular use

After downloading layui, introduce_ layui.css_ And_ layui.js_ that will do

Through_ layui.use(‘laydate’, callback)_ After loading the module, call the method again

  1. Use as a stand-alone component

golayDateDownload the component package from the official website of the independent version and introduce laydate.js

Direct call method use

Using in layui module

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
< title > date and time selection
<link rel=”stylesheet” href=”layui/css/layui.css”>
</head>
<body>
<div class=”layui-inline”>
<input type=”text” class=”layui-input” id=”date1″ />
</div>
</body>
<script></script>
<script type=”text/javascript”>
layui.use(‘laydate’, function(){
var laydate = layui.laydate;

//Execute a laydate instance
laydate.render({
Element: ‘# date1’ / / specifies the element
});
});
</script>
</html>

Basic parameters
  1. Elem – binding element

    Type: string / DOM, default: none

    Required item. It is used to bind the element of execution date rendering. The value is generally selector or DOM object

    laydate.render({
    Elem: ‘# test’ / / or elem: document. Getelementbyid (‘test ‘), elem: lay (‘ # test ‘), etc
    });

  2. Type – control selection type

    Type: string, default value: Date

    It is used to provide different selector types separately. The optional values are as follows:

    Type optional value

    name

    purpose

    year

    Year selector

    Only year list selection is available

    month

    Date selector

    Only year and month options are available

    date

    Date Pickers

    Optional: year, month and day. The default value of type is optional

    time

    Time selector

    Only hours, minutes and seconds are available

    datetime

    date time picker

    Optional: year, month, day, hour, minute and second

    //Year selector
    laydate.render({
    elem: ‘#test’
    ,type: ‘year’
    });

    //Date selector
    laydate.render({
    elem: ‘#test’
    ,type: ‘month’
    });

    //Date selector
    laydate.render({
    elem: ‘#test’
    //, type: ‘date’ / / default, optional
    });

    //Time selector
    laydate.render({
    elem: ‘#test’
    ,type: ‘time’
    });

    //Date time selector
    laydate.render({
    elem: ‘#test’
    ,type: ‘datetime’
    });

  3. Format – custom format

    Type: string, default value: yyyy MM DD

    Set the date format you need by the format character and length of the date and time. Laydate supports the following formats:

    Formatter

    explain

    yyyy

    Year, at least four digits. If there are less than four digits, zero will be filled in the front

    y

    Year, unlimited number of digits, that is, no matter how many digits of the year, the front is not filled with zero

    MM

    Month, at least double digits. If there are less than two digits, zero will be filled in the front.

    M

    Month, one digit allowed.

    dd

    Date, at least two digits. If there are less than two digits, zero will be filled in the front.

    d

    Date, one digit allowed.

    HH

    Hours, at least two digits. If there are less than two digits, zero will be filled in the front.

    H

    Hours, one digit allowed.

    mm

    Minutes, at least two digits. If there are less than two digits, zero will be filled in the front.

    m

    Minutes, one digit allowed.

    ss

    Seconds, at least two digits. If there are less than two digits, zero will be filled in the front.

    s

    Seconds, one digit allowed.

    Through the combination of the above different format characters into a period of date and time string, any typesetting can be done.

    //Custom date format
    laydate.render({
    elem: ‘#test’
    , format: ‘yyyy mm MM DD’ / / any combination is allowed
    });

  4. Value – initial value

    Type: string, default: new date ()

    Support to pass in date format characters according to the format parameter setting, or new date ()

    //Pass in the character in the format to the initial value
    laydate.render({
    elem: ‘#test’
    , value: ‘2018-08-18’ / / the format set by the format parameter must be followed
    });

    //Pass in the date object to the initial value
    laydate.render({
    elem: ‘#test’
    , value: new date (1534766888000) / / the parameter is the time stamp of 20:08:08 on August 20, 2018
    });

paging

Module loading Name:_ laypage_

Quick use

The use of laypage is very simple. Point to a container for storing paging, and get some initial values through the server to complete paging rendering.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
< title > pagination < / Title >
<link rel=”stylesheet” href=”layui/css/layui.css”>
</head>
<body>
<div id=”test1″></div>
</body>
<script></script>
<script type=”text/javascript”>
layui.use(‘laypage’, function(){
var laypage = layui.laypage;

//Execute a laypage instance
laypage.render({
Elem: ‘test1’ / / note that test1 here is an ID, and there is no need to add a sign
, count: 50 / / the total number of data obtained from the server
});
});
</script>
</html>

Basic parameters

Through the core method:_ laypage.render(options)_ To set the basic parameters.

Parameter options

explain

type

Default value

elem

Point to the container where pagination is stored. The values can be container ID and DOM object. For example: 1. Elem: ‘ID’Note: you can’t put a sign here 2. elem: document.getElementById(‘id’)

String/Object

count

Total number of data. It is generally obtained through the server

Number

limit

Number of entries per page. Laypage will calculate the number of pages by count and limit.

Number

10

limits

Number of choices per page. If limit is turned on in the layout parameter, a select box for the number of entries per page will appear

Array

[10, 20, 30, 40, 50]

curr

Start page. It is generally used for refresh type page skipping and hash page skipping. For example, / / open the location.hash record laypage.render ({elem: ‘test1’, count: 500, / / get the start page curr: location.hash.replace (‘#!)! Fenye = ‘,’) / / custom hash value, hash: ‘fenye’})`

Number

1

groups

Number of consecutive pages

Number

5

prev

Customize the content of “previous page” and support normal text and HTML

String

previous page

next

Customize the content of “next page”, as above

String

next page

first

Customize the content of “home page”, as above

String

1

last

Customize the content of “end page”, as above

String

Total page value

layout

Custom typesetting. The optional values are:_ count_( Total entry (input area)_ prev_( Previous page area)_ page_( Paging area)_ next_( Next page area)_ limit_( Item options area)_ refresh_( Page refresh area. Note: new in layui 2.3.0)_ skip_( Quick skip area)

Array

[‘prev’, ‘page’, ‘next’]

theme

Custom theme. Support incoming:_ Color value, Or_ Any ordinary character. For example: 1. Theme: ‘# C00’ 2. Theme:’xxx ‘/ / a CSS class of class = “layui laypage XXX” will be generated to customize the theme

String

hash

Open location. Hash and customize the hash value. If it is enabled, when paging is triggered, the URL will be appended automatically: ᦇ! Hash value = {curr}_ With this, you can navigate to the specified page when the page is loaded

String/Boolean

false

Jump – switch paging callback

Triggered when paging is switched, the function returns two parameters:_ obj_( All option values of the current page), first (whether it is the first time or not, which is generally used to determine the initial loading)

laypage.render({
elem: ‘page’
, count: 100 / / the total number of data obtained from the server
, groups:10 // Number of consecutive pages
, layout: [‘prev ‘,’ page ‘,’ next ‘,’ limit ‘,’ count ‘] / / custom typesetting
, limits: [5,10,20] / / if the limit value is set in the layout property, the number of entries drop-down selection box will appear
,jump: function(obj, first){
//Obj contains all the parameters of the current paging, such as:
console.log(obj.curr); // Get the current page in order to request the data of the corresponding page from the server.
console.log(obj.limit); // Get the number of items displayed on each page

//Not implemented for the first time
if(!first){
//do something
}
}
});

Data table

Module loading Name:_ table_

Quick use

The easiest way to create a table instance is to place an element on the page<table id=”demo”></table>_, And then through_ table.render()Method to specify the container.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
< title > table data table
<link rel=”stylesheet” href=”layui/css/layui.css”>
</head>
<body>

</body>

2. Rendering tableclass=”layui-table”Of

label. 2) set attributes on the labellay-data=””It is used to configure some basic parameters

Setting properties in Tags_ lay-data=””_ Used to configure header information

ID user name Gender
Converting static tables

There is already a table with content on the page, which is composed of the original table tag, and only needs to be given some dynamic elements.

Nickname? integral autograph
Virtuous heart 1 66 Life is like a practice

Execute the JS method for converting tables

layui.use(‘table’, function(){
var table = layui.table;

//Converting static tables
table.init(‘demo’, {
Height: 315 / / set height
//All basic parameters are supported
});

});

Scenarios for using basic parameters

//Scenario 1: the key value in the following method is the basic parameter item
table.render({
height: 300
,url: ‘user.json’
});

//Scenario 2: the following content in lay data is the basic parameter item. Remember: use single quotation marks for the value

……

//More scenarios: the following options are objects with basic parameter items

//JS implementation code

edit
delete</script>

ID ID user name Gender city integral

layui.use(‘table’, function(){
var table = layui.table;

//Listen to cell editing
table.on(‘edit(demo)’, function(obj){
VaR value = obj. Value / / get the modified value
, data = obj. Data / / get all the key values of the line
,field = obj.field; // Get the field
Layer.msg (‘[ID:’ + data. ID + ‘]’ + field + ‘field is changed to’ + value ‘);
});

});

Overloading of data table

<div class=”demoTable”>
Search ID:
<div class=”layui-inline”>
<input class=”layui-input” name=”id” id=”demoReload” autocomplete=”off”>
</div>
< button class = layui BTN “id = searchbtn > < button > Search
</div>

layui.use(‘table’, function(){