layui入门_layui 入门-CSDN博客

本文链接：https://blog.csdn.net/xiaoyi215/article/details/100134369

layui入门

先解压下载的压缩包，然后导入文件：

在这里插入图片描述

导入一个layui.css代码和layui.js代码:

 <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">

<script src="../layui-v2.5.4/layui.js" type="text/javascript"></script>

例子1:hello word:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Layui入门</title>
  <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">
</head>
<body>
<script src="../layui-v2.5.4/layui.js" type="text/javascript"></script>
<script type="text/javascript">
layui.use(['layer', 'form'], function(){
  var layer = layui.layer,
  form = layui.form;
  layer.msg('Hello World');
});


</script>
</body>
</html>

结果:
在这里插入图片描述
例子2：非模块化方式使用layui:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>入门指南2:非模块化方式使用layui</title>
  <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">
</head>
<body>
<script src="../layui-v2.5.4/layui.all.js" type="text/javascript"></script>
<script type="text/javascript">
;!function(){
	var layer =layui.layer,
	form = layui.form;
	layer.msg("Hello Word2");
	
}
();

</script>
</body>
</html>

结果:

在这里插入图片描述
例子3：自定义模块layUI.define：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>入门指南3</title>
  <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">
</head>
<body>
<script src="../layui-v2.5.4/layui.all.js" type="text/javascript"></script>
<script type="text/javascript">
//自定义模块layUI.define(,)
layui.define(['layer','form'],function(exports){
	alert('模块定义成功');
	//把模块想外抛
	exports('mymodel',{});
});
//使用自定义模块
layui.use(['mymodel'],function(){
	
}); 
</script>
</body>
</html>

结果:
在这里插入图片描述
例子4：运用布局、辅助、背景色进行讲解:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
  <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">
  <style type="text/css">
#div1{
 background-color: pink;
 width: 300px;
 height: 300px;
}  

  </style>
</head>
<body>
<div class="layui-main layui-unselect">hhhh</div>
<input type="button"value="按钮1" class="layui-disabled">

<div id="div1" class="layui-circle layui-hide"></div><!-- 圆形 -->
<div class="layui-bg-cyan">111</div>
<div class="layui-bg-green">222</div>
<div class="layui-bg-gray">333</div>

<script src="../layui-v2.5.4/layui.js" type="text/javascript"></script>
<script type="text/javascript">


</script>
</body>
</html>

结果:
在这里插入图片描述
案例5：Tab选项卡、自定义属性被调用:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
  <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css">
  <style type="text/css">

  </style>
</head>
<body>
<div class="layui-main">
 <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">标题一</li><!--选中标题1  -->
    <li>标题二</li>
    <li>标题三</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容显示1</div>
    <div class="layui-tab-item">内容显示2</div>
    <div class="layui-tab-item">内容显示3</div>
  </div>
</div>
</div>
<form action="">
<input type="submit" lay-submit class="lay-btn" lay-filter="login" value="按钮1"/>

</form>
<script src="../layui-v2.5.4/layui.js" type="text/javascript"></script>
<script type="text/javascript">
layui.use(['form'],function(form){
	form.on('submit(login)',function(){
		alert('自定义事件被调用');
	});//绑定事件
	
});

</script>
</body>
</html>

结果:
在这里插入图片描述