专栏目录-【持续更新】
经典模块化前端框架
由职业前端倾情打造,面向所有层次的前后端开发者,零门槛开箱即用的前端UI解决方案
layui简介
layui现在的版本为2.5.4,下载量已经达到1220622次(截止到2019年9月9日15:02:18),其中在github点赞已经达到19.5k,感觉还是可以的。基于layui的后台模板还是比较经常使用的,开发Java的人知道。
layui优点:
- 采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用。
- **返璞归真:**身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。
- **双面体验:**拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。
- **星辰大海:**如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。
- layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
为什么使用layui
ayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
开始使用layui
-
首先我们进入layui官网:https://www.layui.com/ 在官网首页下载layui2.5.4版本
-
下载完以后解压查看目录结构
我们需要看一下layu/modules里面的文件:
这里面包括jquery.js,element.js等,这些都是基于layui的js文件。
在使用的时候需要我们调用,具体语法如下所述:
layui.use([‘element’],function(){
//JS逻辑代码,其中element可以跟多个,需用‘,’隔开,然后用“”或‘引入’
}) -
github仓库下载
https://github.com/sentsin/layui/ -
npm安装
npm install layui-src
一般用于webpack管理
快速上手
下载并解压layui文件后,讲其完整的部署到所开发项目中,以便于我们进行二次开发
我们需要引入下述两个文件:
./layui/css/layui.css
./layui/layui.js
官网还给出了两种开发方式:模块化开发和非模块化开发。
有兴趣的或者JS基础比较好的可以去官网看一下https://www.layui.com/
layui图标
我们从layui简单的开始—icon图标
- 首先创建一个icon.html文件
- 将layui.css和layui.js引入(请大家养成一个好习惯,css和js一起引入)
- 使用一个容器元素(如:div、span、p等),有两种办法使用layui的图标
这是layui官网图标截图,大家可以看到,共有140个图标,上文我们说到,共有两种办法,话不所说,直接上代码:
代码很容易看懂,不解释。
layui按钮
向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
- 主题按钮
源代码:
- 尺寸按钮
在主题按钮的class后加上layui-btn-lg(大型按钮)、layui-btn表示默认尺寸按钮、layui-btn-sm小型按钮、layui-btn-xs迷你按钮 - 圆角按钮
只需在想要圆角按钮的layui-btn后面加上layui-btn-radius即可。 - 图标按钮
图标按钮为按钮和图标组合,如代码所示:
- 按钮组
将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配 - 点击某个按钮弹出对话框
layui.use([‘jquery’],function(){ //引入jquery模板
var = l a y u i . j q u e r y ; / / 定 义 =layui.jquery; //定义 =layui.jquery;//定义符号
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((this).html())//点击事件,弹出自身按钮文字
})
}) - 是自己写了一个关于按钮的页面,有需要的可以看一下。
效果如图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>按钮</title>
<link rel="stylesheet" href="reources/layui/css/layui.css">
<!-- 如需使用请更换为自己的css路径 -->
</head>
<body>
<legend>主体按钮</legend>
<div>
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<legend>图标按钮</legend>
<div>
<button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-cellphone">手机按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-lg">
<span class="layui-icon"></span>半角按钮大
</button>
</div>
<legend>圆角按钮</legend>
<div>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">圆角按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg">圆角按钮大</button>
</div>
<legend>按钮组</legend>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<span class="layui-btn layui-btn-primary">AAAA</span>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-lg">大按钮</button>
</div>
</body>
<script src="reources/layui/layui.js"></script>
<!-- 如需使用请更换为自己的js路径 -->
<script>
layui.use(['jquery'],function(){
var $=layui.jquery;
$('.layui-btn').click(function(){
alert($(this).html())
})
})
</script>
</html>
layui导航栏
导航栏依赖加载模块为:element
- 水平导航栏
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>水平导航菜单</legend>
</fieldset>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd class="layui-this"><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd class="layui-this"><a href="">选中项</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
依赖class=‘layui-nav’
其中layui-this指当前定位在此。
效果如图:
可以对水平导航增加背景颜色:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
- 垂直导航
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>垂直导航菜单</legend>
</fieldset>
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd class="layui-this"><a href="">选中项</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
效果如图:
其中垂直导航栏支持背景颜色仅有:layui-bg-cyan(藏青)
layui选项卡
依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用
- 默认选项卡
代码:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的Tab</legend>
</fieldset>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
简洁风格选项卡和卡片风格对应代码如下:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>简洁风格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
2.卡片风格的tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>卡片风格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
3.可删除的tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>可删除的简洁风格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-allowclose='true'>
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
只需在class='layui-tab’后加上 lay-allowclose=‘true’
- 动态操作tab选项卡
<div class="layui-tab layui-tab-brief" lay-allowclose='true' lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li lay-id='1'>用户管理</li>
<li>权限分配</li>
<li lay-id='2'>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<!-- 添加需要demo -->
<!-- 给出三个按钮,分别为添加tab,切换tab,删除tab -->
<button type="button" class="layui-btn" id="add">添加一个add</button>
<button type="button" class="layui-btn" id="change">切换用户管理</button>
<button type="button" class="layui-btn" id="delete">删除商品管理</button>
JS逻辑代码为:
<script>
// 引入jquery和element模块
layui.use(['element','jquery'],function(){
// 定义$符号
var $=layui.jquery;
// 定义element
var element=layui.element;
// 添加一个tab
$('#add').click(function(){
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
,id: '选项卡标题的lay-id属性值'
});
})
// 切换tab
$('#change').click(function(){
element.tabChange('demo', '1');
})
// 删除tab
$('#delete').click(function(){
element.tabDelete('demo', '2'); //删除 lay-id="xxx" 的这一项
})
})
</script>
可以参考layui官网里element模块元素操作文档:https://www.layui.com/doc/modules/element.html
layui进度条
进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。
- 默认风格的进度条
代码所示:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认风格的进度条</legend>
</fieldset>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="70%"></div>
</div>
</div>
2.更多颜色进度条和大进度条和显示进度条比例
代码所示:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>更多颜色选取</legend>
</fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true">
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
<br>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
<br>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
</div>
<br>
<div class="layui-progress" lay-showpercent='true'>
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
</div>
<br>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>
静态风格进度条属性样式总结:
- 样式:
(1)基本样式:layui-progress layui-progress-bar
(2)大进度条:layui-progress-big - 属性:
(1)设置默认长度:lay-percent=“50%”
(2)是否显示比例: lay-showpercent=‘true’
动态进度条操作
代码所示:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>动态改变进度</legend>
</fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
<button class="layui-btn site-demo-active" id="setPercent">设置50%</button>
<button class="layui-btn site-demo-active" id='setZero'>归零</button>
</div>
</body>
<script src="reources/layui/layui.js"></script>//如需使用请更改js路径
<script>
layui.use(['element'],function(){
var $ = layui.jquery;
var element=layui.element;
$('#setPercent').click(function(){
element.progress('demo','50%')
})
$('#setZero').click(function(){
element.progress('demo','0')
})
});
</script>
需要引入element模块。
然后动态操作。
不懂可联系本人,联系方式在结尾
结尾
这是本人第一次写博客,新手。如有不到位的地方还请指教。
如需技术上的知识探讨请加QQ:1204039238或发送邮箱pcshaovip@163.com
参考文献
[1]: https://www.layui.com/