layui使用总结_PHP中文网手记

摘要：layui是前端布局框架，可以使前端开发人员快速的把页面拉起来；使用步骤: 1、在layui官网下载组件css,js2、引入layui.css 样式文件,layui.js js文件；3、页面布局中使用的是layui 的内部对应的样式class 就可以完成标签的配置；4、使用layui.js时需要先引入layui.js 然后加载对应的模块；layui.use(['lay

layui是前端布局框架，可以使前端开发人员快速的把页面拉起来；

使用步骤:

1、在layui官网下载组件css,js

2、引入layui.css 样式文件,layui.js js文件；

3、页面布局中使用的是layui 的内部对应的样式class 就可以完成标签的配置；

4、使用layui.js时需要先引入layui.js 然后加载对应的模块；

layui.use(['laypage','upload'],function(){

var laypage = layui.laypage;

var upload = layui.upload;

$ = layui.jquery;

})

<!DOCTYPE html>
<html>
<head>
	<title>商品添加</title>
	<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
	<script type="text/javascript" src="static/layui/layui.js"></script>
	<style type="text/css">
		.header span{background: #009688;color: white;padding: 10px;margin-left: 30px;line-height: 33px;}
		.header button{float: right;}
		.header{border-bottom: 2px solid #009688;}
		.thumb{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;}
	</style>
</head>
<body style="padding: 10px;">
	<div class="header">
		<span>商品添加</span>
		<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
	</div>

	<form class="layui-form" style="padding: 10px;">

		<div class="layui-form-item">
			<label class="layui-form-label">商品类目</label>
			<div class="layui-input-inline">
				<select name="cate">
					<option value="0">请选择</option>
					<option value="1">手机</option>
					<option value="2">电脑</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-inline">
				<input type="text" name="" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">图片上传</label>
			<div class="layui-input-inline">
				<button type="button" class="layui-btn layui-btn-sm" id="uploads">
					<i class="layui-icon">&#xe67c;</i>图片上传
				</button>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-inline">
				<textarea rows="6" cols="25">
					我是一个文本框。 
				</textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline">
				<input type="checkbox" name="like" title="禁用">
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn-xm layui-btn">添 加</button>
			</div>
		</div>


	</form>


<script type="text/javascript">
	//折叠
	layui.use(['layer','form','laypage','upload'],function(){
		var layer = layui.layer;
		 var form = layui.form;
		 laypage  = layui.laypage;
		 $		= layui.jquery;
		 var upload = layui.upload;

		 upload.render({
		 	elem:'#uploads',
		 	url:'/upload/',
		 	done:function(res){},
		 	error:function(){}
		 });

	});
	
</script>


</html>

批改老师：查无此人批改时间：2019-06-10 10:13:46
老师总结：完成的不错。layui封装了很多js，多看文档。继续加油。

layui使用总结

热门词条