layui.css如何使用,Layui 基本使用

介绍

由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但个人认为该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

说白了，该框架就是为了方便后端人员开发前端而使用的。

官方文档：https://www.layui.com/doc/

Layui、Easyui和Bootstrap对比

环境导入

// 本地导入：

// 导入CSS文件

// 导入JS文件

// CDN导入：

注：

若将Layui下载到本地进行导入时，记得在将layui.css和layui.js导入的同时，将其中的字体等也一同导入，以免显示的结果有异常

使用CDN导入时，提供的CDN链接由于配置文件，在导入字体文件等时会出现跨域请求的问题，所以字体等可能无法正常显示，因此不推荐，不过这里还是附上CDN链接：CDN链接

好看的字体图标

好用的内置模块

layer弹层

这个是该框架的代表作，常用于一些公告、提示框、轮播相册等场景，举例：

弹层使用

我下面会出现一个弹层

layui.use('layer', function () {

var layer = layui.layer;

layer.tips('上', '#test1', { // 表示在id=test1的地方显示弹层

tips: 3, // 1/2/3/4分别表示从：上/右/下/左显示弹层

time: 0, // 设置为0表示不消失

});

});

结果图：

弹层示例图

多个弹层示例

弹层使用

显示弹层

删除弹层1

删除弹层2

删除弹层3

删除弹层4

我上面会出现一个弹层

我右面会出现一个弹层

我下面会出现一个弹层

我左面会出现一个弹层

layui.use('layer', function () {

$('#show').click(function () {

for (i = 1; i <= 4; i++) {

layui.layer.tips(i, '#test' + i, { // 表示在id=test1的地方显示弹层

tips: i, // 1/2/3/4分别表示从：上/右/下/左显示弹层

// area: ['200px', '20px'], // 设置长高

time: 0, // 设置为0表示不消失

tipsMore: true, //支持多个弹层

success: function (layero, index) {

// console.log(layero, index);

layero.addClass(i + "-error"); // 添加一个class

layero.children().eq(0).removeAttr("style");

layero.children().eq(0).css("line-height", "20px"); // 设置行高

// 给当前的标签设置id及样式

}

});

}

});

$('.del').click(function () {

current = $(this).index();

$("." + current + '-error').remove();

// 删除按钮对应弹层，这里没有使用官方提供的close方法

// 因为close方法是根据弹层的索引来进行删除

// 但是每点击依次显示弹层，就会多4个弹层，那么其将无法把你希望的弹层都删除

})

});

结果图：

多个弹层示例

样式参考文档：https://www.layui.com/demo/layer.html

更多使用示例：http://layer.layui.com/

日历控件示例

layDate快速使用

layui.use('laydate', function () {

var laydate = layui.laydate;

//执行一个laydate实例

laydate.render({

elem: '#test1', //指定元素

type: 'datetime'

});

});

结果图：

日历示例

前后端结合完整示例-Flask+Layui实现分页表格

后端代码

# -*- coding: utf-8 -*-

from flask import Flask, make_response, request

app = Flask(__name__)

@app.route("/aaaaa")

def xxx():

page = int(request.args["page"])

limit = int(request.args["limit"])

aaa = {"code":0,"msg":"","data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0", "sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]}

aaa["count"] = len(aaa["data"])

aaa["data"] = aaa["data"][(page-1)*10: (page-1)*10 + limit]

import json

rst = make_response(json.dumps(aaa))

rst.headers['Access-Control-Allow-Origin'] = '*'

return rst

if __name__ == '__main__':

app.run()

前端代码

layPage快速使用

layui.use('table', function () {

var table = layui.table;

//第一个实例

table.render({

elem: '#demo'

, height: 500

, url: 'http://127.0.0.1:5000/aaaaa' //数据接口

, page: true //开启分页

, limit: 10 //数据总数，从服务端得到

, loading: false

, LAY_CHECKED: true

, cols: [[ //表头

{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}

, {field: 'username', title: '用户名', width: 80}

, {field: 'sex', title: '性别', width: 80, sort: true}

, {field: 'city', title: '城市', width: 80}

, {field: 'sign', title: '签名', width: 177}

, {field: 'experience', title: '积分', width: 80, sort: true}

, {field: 'score', title: '评分', width: 80, sort: true}

, {field: 'classify', title: '职业', width: 80}

, {field: 'wealth', title: '财富', width: 135, sort: true}

]]

});

});

结果图：

分页表格示例

文件上传

树形图

图片示例：

树形图示例

参考：https://www.layui.com/doc/modules/tree.html

颜色选择器

图片示例：

颜色选择器示例

参考：https://www.layui.com/doc/modules/colorpicker.html

分页导航栏

图片示例：

分页导航栏示例

参考：https://www.layui.com/doc/modules/element.html

评分组件

举例：

评分使用

layui.use('rate', function () {

var rate = layui.rate;

var ins1 = rate.render({

elem: '#test1', //绑定元素

value: 3, // 默认三颗星

choose: function (value) {

console.log(value); // 点击输出评分

}

});

});

结果图：

评分组件示例

参考：https://www.layui.com/doc/modules/rate.html

工具集

固定块

可以固定一个图框在网页的某个位置(有点像IPhone里固定在屏幕的灰色圈圈)，点击后实现某个功能，举例：

固定块使用

layui.use('util', function () {

var util = layui.util;

util.fixbar({

bar1: true

, css: {left: 0, top: 300}

, click: function (type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

}

});

});

结果图：

固定块示例

代码块

即让代码显示出来，举例：

代码块使用

print("hello world!")

exit()

layui.use('code', function () { //加载code模块

layui.code(); //引用code方法

});

结果图：

代码块示例

轮播图

举例：

轮播图使用

条目1

条目2

条目3

条目4

条目5

layui.use('carousel', function () {

var carousel = layui.carousel;

//建造实例

carousel.render({

elem: '#test1'

, width: '100%' //设置容器宽度

, arrow: 'always' //始终显示箭头

});

});

结果图：

轮播图示例

Layui踩坑记录

使用弹层时第一次的效果不对，之后又没问题

原因：第一次执行时资源没有加载完毕

解决办法：把弹层功能放在layer.ready中执行，举例：

layui.use('layer', function () {

let layer = layui.layer;

layer.ready(function () {

// 将内容放在ready方法里

layer.msg("测试", {

time: 0,

area: ['300px', '150px'],

shade: [0.6, '#000', true],

icon: 7,

shadeClose: true,

btn: ['关闭']

});

})

});