【免费】Layui前端UI框架压缩包资源-CSDN文库

共10个文件

html：3个

woff2：1个

woff：1个

需积分: 0 31 浏览量 2024-06-25 16:43:39 上传评论收藏 379KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

<!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>  <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>

评论收藏

内容反馈