layui

最新推荐文章于 2025-04-15 15:43:39 发布

李浩东@

最新推荐文章于 2025-04-15 15:43:39 发布

阅读量1.4k

点赞数 28

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_64180190/article/details/134896272

版权

1、

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .layui-show-loading {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 9999;
       display: flex;
       justify-content: center;
       align-items: center;
       }

       .layui-spinner {
       display: inline-block;
       width: 30px;
       height: 30px;
       border: 2px solid #fff;
       border-top-color: #1E9FFF;
       border-radius: 50%;
       animation: layui-rotate 1s linear infinite;
       }

       @keyframes layui-rotate {
       to { transform: rotate(360deg); }
       }

   </style>
</head>
<body>
   <div class="layui-show-loading">
   <div class="layui-spinner layui-anim layui-anim-rotate layui-anim-loop"></div>
   </div>

</body>
<script>
   // 显示加载动画
   function showLoading() {
   $('.layui-show-loading').show();
   }

   // 隐藏加载动画
   function hideLoading() {
   $('.layui-show-loading').hide();
   }

</script>
</html>

效果图

2、时间筛选框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui时间筛选框</title>

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="start_time" id="start_time" class="layui-input" placeholder="开始时间">
</div>
<div class="layui-input-inline">
<input type="text" name="end_time" id="end_time" class="layui-input" placeholder="结束时间">
</div>
<button class="layui-btn layui-btn-primary" id="search_btn">搜索</button>
</div>
</form>
</div>
</div>
</div>

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['laydate', 'form'], function() {
var laydate = layui.laydate;
var form = layui.form;

// 开始时间选择器
laydate.render({
elem: '#start_time',
type: 'datetime',
done: function(value, date) {
// 当开始时间选择器选中时间后，结束时间选择器自动变为可选状态
endDateTime.max = value;
endDateTime.render();
}
});

// 结束时间选择器
var endDateTime = laydate.render({
elem: '#end_time',
type: 'datetime',
done: function(value, date) {
// 当结束时间选择器选中时间后，开始时间选择器自动变为不可选状态
startDateTime.min = value;
startDateTime.render();
}
});

// 搜索按钮点击事件
$('#search_btn').on('click', function() {
var start_time = $('#start_time').val();
var end_time = $('#end_time').val();
console.log('开始时间：' + start_time);
console.log('结束时间：' + end_time);
// 这里可以添加具体的搜索逻辑
});
});
</script>
</body>
</html>

结果图：

3、Layui下拉框：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 下拉框样式 */
       .layui-form-select dl {
       max-height: 200px;
       }
       .layui-form-selected dl {
       display: none;
       }

   </style>
</head>
<body>
   <div class="layui-form-item">
   <label class="layui-form-label">下拉框</label>
   <div class="layui-input-block">
   <select name="city" lay-verify="">
   <option value=""></option>
   <option value="0">北京</option>
   <option value="1">上海</option>
   <option value="2">广州</option>
   <option value="3">深圳</option>
   <option value="4">杭州</option>
   </select>
   </div>
   </div>

</body>
<script>
   // 初始化下拉框
   layui.use('form', function(){
   var form = layui.form;

   //监听提交
   form.on('submit(formDemo)', function(data){
   layer.msg(JSON.stringify(data.field));
   return false;
   });
   });

</script>
</html>

4、