Web 前端框架 Layui
- 1. 模块化前端框架 Layui
- 2. 在 Web 项目中引入 Layui 框架
- 3. 网页轮播特效
- 4. 表格模块和分页模块的使用
1. 模块化前端框架 Layui
Layui 是一款采用自身模块规范编写的 Ul 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛低,适合界面的快速开发;
2. 在 Web 项目中引入 Layui 框架
点击下载 layui 文件,将下载好的文件放到项目的目录中;使用 Layui 要引用这两个文件
./layui/css/layui.css
./layui/layui.js
注意: 若引用的 JS 文件时 layui.all.js
,既是非模块化方式;
例子:使用 Layui 制作快显信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 Layui 的 layer 模块做快显信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="src/css/layui.css" />
<script src="src/layui.js"></script>
</head>
<body>
<script>
layui.use(['layer','form'],function(){
// 以模块化方式加载相关模块
// 创建两个模块 layer 和 ferm 的实例对象
var layer=layui.layer,form=layui.form;
layer.msg('Hello are you!');
});
</script>
</body>
</html>
3. 网页轮播特效
Layui 框架提供了很多的网页特效;
例子:用 Layui 制作一组图片的轮播效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用 Layui 的 carousel 模块实现图片自动轮播效果</title>
<link rel="stylesheet" href="../src/css/layui.css" media="all">
</head>
<body>
<div class="layui-carousel" id="s1">
<div carousel-item>
<img src="../../time_2_1/image/01.png" width="100%">
<img src="../../time_2_1/image/02.png" width="100%">
<img src="../../time_2_1/image/03.png" width="100%">
<img src="../../time_2_1/image/04.png">
<img src="../../time_2_1/image/05.png" width="100%"> </div></div>
</body>
</html>
<script src="../src/layui.js"></script>
<script>
layui.use('carousel', function(){ //加载轮播模块
var carousel = layui.carousel; /*carousel:旋转木马*/
carousel.render({
elem: '#s1',
width: '100%', //设置容器宽度
arrow: 'always' //单击左右箭头或下方的图片序号标识按钮实现手动控制
});
});
</script>
4. 表格模块和分页模块的使用
Layui 框架提供了 laypage 模块,用来给二位表数据的分页显示;
例子:使用表格模块分页显示二维表数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用 Layui 的 table 模块分页显示二维表数据</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="../src/css/layui.css" media="all" />
</head>
<body>
<table class="layui-hide" id="table_demo"></table>
</body>
</html>
<script src="../src/layui.js" charset="UTF-8"></script>
<script>
layui.use('table',function(){
// 加载表格模块 table
var table=layui.table;
table.render({
// 展示已知数据
elem:'#table_demo',
cols:[[
// 表格标题栏含有7个字段
{field:'id',title:'ID',width:80,sore:true},
{field:'username',title:'用户名',width:80},
{field:'sign',title:'签名',Width:180},
{field:'sex',title:'性别',width:80},
{field:'city',title:'城市',width:100},
{field:'scoure',title:'积分',width:80,sore:true}
]],
data:[{
// 数组元素由8个 JSON 格式的键值对数据组成,{}内含有7个字段
"id":"001",
"username":"杜某",
"sex":"男",
"city":"河南",
"sign":"人生是一段美好的旅程!",
"scoure":"686"
},
{
"id":"002",
"username":"李某",
"sex":"男",
"city":"锦州",
"sign":"人生是一段美好的旅程!",
"scoure":"565"
},
{
"id":"003",
"username":"王某",
"sex":"男",
"city":"山西",
"sign":"人生是一段美好的旅程!",
"scoure":"663"
},
{
"id":"004",
"username":"华某",
"sex":"女",
"city":"河南",
"sign":"人生是一段美好的旅程!",
"scoure":"705"
},
{
"id":"005",
"username":"张某",
"sex":"男",
"city":"浙江",
"sign":"人生是一段美好的旅程!",
"scoure":"160"
},
{
"id":"006",
"username":"李某",
"sex":"男",
"city":"广东",
"sign":"人生是一段美好的旅程!",
"scoure":"186"
},
{
"id":"007",
"username":"张某",
"sex":"女",
"city":"四川",
"sign":"人生是一段美好的旅程!",
"scoure":"246"
}],
page:true, //是否显示分页
limit:5 //每页显示的数量,默认为10
});
});
</script>
Layui 框架提供了 laypage 模块,给二维表数据做分页显示;
例子:分页导航设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>LayUI框架之分页组件</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="../css/layui.css" media="all"/>
</head>
<body>
<ul id="city_list"></ul>
<div id="nav"></div>
</body>
</html>
<script src="../layui.all.js"></script>
<script>
var data = [['广州','深圳','珠海'],['长沙','株洲','湘潭'],['郑州','洛阳','漯河'],['南昌','上饶','九江'],['武汉','黄石','荆州'],['福州','厦门','三明'],
['杭州','常州','绍兴'],['南京','苏州','无锡'],['南宁','柳州','桂林'],['济南','青岛','烟台'],['贵阳','六盘水','遵义'],['昆明','曲靖','丽江']];
data.push(['石家庄','唐山','张家口'],['贵州','云南','北京']); //ok
layui.laypage.render({ //layui框架之分页组件laypage
elem: 'nav'
,limit:5 //每页记录数,默认值为10
,skin: '#1E9FFF' //自定义选中色值
,count: data.length
,jump: function(obj, first){
var startNum = (obj.curr-1) * obj.limit;
var endNum = startNum + obj.limit;
var currentData = data.slice(startNum, endNum);
console.log(currentData); //测试Console控件台输出
layui.each(currentData, function (index, item) {
currentData[index] = '<li>'+item[0]+','+item[1]+','+item[2]+'</li>';
});
document.getElementById('city_list').innerHTML = currentData.join('');
if(!first){ //单击分页导航上的链接时
layer.msg('第'+ obj.curr +'页', {offset: 'b'}); //页数效果显示
}
}
});
</script>