layer web前端的框架的使用，

最新推荐文章于 2025-05-31 15:55:05 发布

ConfidentWU

最新推荐文章于 2025-05-31 15:55:05 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端

本文链接：https://blog.youkuaiyun.com/mengtianqq/article/details/79884248

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

layui是一款遵循原生HTML/CSS/JS编写的前端UI框架，门槛低，易上手。本文介绍layui的基本概念，并通过实例演示如何在项目中引入并使用该框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、layer是什么

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

二、layer的使用步骤

1.下载layer

在这个地址;http://www.layui.com,下载好压缩包。

2.导入layer

获取layer文件包后，解压并将layer整个文件夹（不要拆分）存放到你项目的任意目录，只需要引入layui.css,layui.all.jss文件就可以了。

<!--///引用layui.css文件-->
	<link rel="stylesheet" href="lib/css/layui.css">
	
	<!--引用layui.all.js文件-->
	<script type="text/javascript" src="lib/layui/layui.all.js"></script>

3.使用layer

<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<!--///引用layui.css文件-->
	<link rel="stylesheet" href="lib/css/layui.css">
	
	<!--引用layui.all.js文件-->
	<script type="text/javascript" src="lib/layui/layui.all.js"></script>
	</head>
  
  <body>
 <br><br><br><br>
    <div class="layui-btn layui-btn-primary" onclick="openshow()">打开</div></div><br>
  </body>
  <script type="text/javascript">
 ;
  function openshow(){
  //使用layer打开一个加载动图
    layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});
  }

  </script>
</html>