前端样式框架demo 前端框架 layui

转载

mob64ca140a8e67 2024-07-01 16:10:16

文章标签 前端样式框架demo 前端前端框架 layui html 文章分类 机器学习人工智能

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>

前端样式框架demo 前端框架 layui_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>

前端样式框架demo 前端框架 layui_layui_02

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>

前端样式框架demo 前端框架 layui_html_03

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>

前端样式框架demo 前端框架 layui_前端框架_04