<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-progress" style="margin: 15px 0 30px;">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<div class="layui-btn-container">
<button class="layui-btn" test-active="test-form">一个按钮</button>
<button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
</div>
<blockquote class="layui-elem-quote" style="margin-top: 30px;">
<div class="layui-text">
<ul>
<li>您当前预览的是:<span>Layui-v<span id="version"></span></span></li>
<li>Layui 是一套开源免费的 Web UI(界面)组件库。这是一个极其简洁的演示页面</li>
</ul>
</div>
</blockquote>
</div>
<!-- body 末尾处引入 layui -->
<script src="layui/layui.js"></script>
<script>
layui.use(function(){
var layer = layui.layer;
var form = layui.form;
var laydate = layui.laydate;
var util = layui.util;
// 欢迎信息
layer.msg('Hello World', {icon: 6});
// 输出版本号
lay('#version').html(layui.v);
// 日期
laydate.render({
elem: '#test2',
value: new Date(),
isInitValue: true
});
// 触发事件
util.on('test-active', {
'test-form': function(){
layer.open({
type: 1,
resize: false,
shadeClose: true,
area: '350px',
title: 'layer + form',
content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">',
'<li class="layui-form-item">',
'<label class="layui-form-label">输入框</label>',
'<div class="layui-input-block">',
'<input class="layui-input" lay-verify="required" name="field1">',
'</div>',
'</li>',
'<li class="layui-form-item">',
'<label class="layui-form-label">选择框</label>',
'<div class="layui-input-block">',
'<select name="field2">',
'<option value="A">A</option>',
'<option value="B">B</option>',
'<select>',
'</div>',
'</li>',
'<li class="layui-form-item" style="text-align:center;">',
'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>',
'</li>',
'</ul>'].join(''),
success: function(layero, index){
layero.find('.layui-layer-content').css('overflow', 'visible');
form.render().on('submit(*)', function(data){
var field = data.field;
// 显示填写的表单
layer.msg(util.escape(JSON.stringify(field)), {
icon: 1
});
// layer.close(index); //关闭层
});
}
});
}
});
});
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
Layui前端UI框架压缩包
共10个文件
html:3个
woff2:1个
woff:1个
需积分: 0 5 下载量 36 浏览量
2024-06-25
16:43:39
上传
评论
收藏 379KB ZIP 举报
温馨提示
Layui是一款轻量级、灵活的前端UI框架,是一套采用自有模块规范编写的前端框架,适用于各种Web开发。Layui具有简洁的CSS框架和直观易用的JavaScript库,内置了丰富实用的UI组件,能够帮助开发人员快速构建现代化、美观大气的Web界面。 Layui的主要特点包括: 简洁易用:Layui的设计理念是“低侵入、高自由”,提供了大量的封装好的UI组件和功能模块,使得开发人员可以快速使用并定制自己需要的界面。 模块化设计:Layui采用了自有的模块化设计规范,将每个UI组件或功能模块拆分为独立的文件,方便按需加载和使用,有利于提高代码的可维护性和扩展性。 响应式设计:Layui提供了响应式设计的支持,可以根据不同设备的屏幕大小和分辨率自动适配布局,确保页面在各种设备上都能正常显示。 提供丰富的组件:Layui内置了众多常用的UI组件,如表格、表单、按钮、导航、弹窗等,以及功能组件,如分页、日期选择器、轮播等,可以大大加速开发流程。 社区活跃:Layui有庞大的社区用户群体,可以在社区中找到丰富的资源、插件和解决方案,便于开发人员学习交流和进行技术分享。 总的来说,L
资源推荐
资源详情
资源评论
收起资源包目录
layui-v2.9.8.zip (10个子文件)
layui-v2.9.8
官方文档.html 277B
layui
layui.js 348KB
font
iconfont.ttf 53KB
iconfont.woff2 29KB
iconfont.svg 323KB
iconfont.eot 53KB
iconfont.woff 34KB
css
layui.css 122KB
test.html 3KB
免责声明.html 307B
共 10 条
- 1
资源评论
大嘴巴子
- 粉丝: 583
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功