layui学习笔记

最新推荐文章于 2024-08-11 15:42:10 发布
最新推荐文章于 2024-08-11 15:42:10 发布
阅读量990 收藏
点赞数
分类专栏： 网站前台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellorichen/article/details/75046569
版权

一.表单

1.lay-verify：注册form模块需要验证的类型

2.lay-search：开启select的搜索功能

3.lay-filter：为提交按钮设置该属性并在提交事件中绑定

4.代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>开始使用Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item" pane>
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <i class="layui-icon"></i> 
                <i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>  
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">按钮</label>
            <div class="layui-input-block">
                 <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
                 <button class="layui-btn layui-btn-radius">默认按钮</button>
                 <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">按钮</label>
            <div class="layui-input-block">
                 <button class="layui-btn">
                    <i class="layui-icon"></i> 添加
                 </button>
                 <button class="layui-btn">
                    <i class="layui-icon">ဂ</i> 
                 </button>
                 <div class="layui-btn-group">
                    <button class="layui-btn layui-btn-small">
                        <i class="layui-icon"></i>
                    </button>
                    <button class="layui-btn layui-btn-small">
                        <i class="layui-icon"></i>
                    </button>
                    <button class="layui-btn layui-btn-small">
                        <i class="layui-icon"></i>
                    </button>
                    <button class="layui-btn layui-btn-small">
                     <i class="layui-icon"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="nan" title="男"> <input
                    type="radio" name="sex" value="nv" title="女" checked> <input
                    type="radio" name="sex" value="" title="中性" disabled>
            </div>
        </div>
		<div class="layui-form-item">
			<label class="layui-form-label">开关</label>
			<div class="layui-input-block">
				<input type="checkbox" name="switch" lay-skin="switch">
			</div>
		</div>
		<div class="layui-form-item" pane>
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="" title="写作"  checked>
                <input type="checkbox" name="" title="发呆" lay-skin="primary">
                <input type="checkbox" name="" title="禁用" lay-skin="primary"
                    disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" required lay-verify="required" placeholder="请输入标题">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="password" placeholder="请输入密码">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="1">石家庄</option>
                    <option value="2">北京</option>
                    <option value="3">上海</option>
                    <option value="4">广州</option>
                    <option value="5">西安</option>
                </select>
            </div>
        </div>
		<div class="layui-form-item">
			<label class="layui-form-label">文本域</label>
			<div class="layui-input-block">
				<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
 

	<script src="../../layui/layui.js"></script>
<script> 
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form();
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script> 
  
</body>
</html>

二、导航栏

1.layui-this：指向当前页面分类

2.layui-nav、layui-nav-tree、layui-nav-side：水平、垂直、侧边展示

3.layui-nav-item、layui-nav-itemed、layui-nav-child：节点、节点是否展开、子节点

4.代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>开始使用Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
    <!-- 导航 -->
	<ul class="layui-nav" lay-filter="">
		<li class="layui-nav-item"><a href="">最新活动</a></li>
		<li class="layui-nav-item layui-this"><a href="">产品</a></li>
		<li class="layui-nav-item"><a href="">大数据</a></li>
		<li class="layui-nav-item"><a href="javascript:;">解决方案</a>
			<dl class="layui-nav-child">
				<!-- 二级菜单 -->
				<dd>
					<a href="">移动模块</a>
				</dd>
				<dd>
					<a href="">后台模版</a>
				</dd>
				<dd>
					<a href="">电商平台</a>
				</dd>
			</dl></li>
		<li class="layui-nav-item"><a href="">社区</a></li>
	</ul>

	<ul class="layui-nav layui-nav-tree" lay-filter="test">
		<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
		<li class="layui-nav-item layui-nav-itemed"><a
			href="javascript:;">默认展开</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="javascript:;">选项1</a>
				</dd>
				<dd>
					<a href="javascript:;">选项2</a>
				</dd>
				<dd>
					<a href="">跳转</a>
				</dd>
			</dl></li>
		<li class="layui-nav-item"><a href="javascript:;">解决方案</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="">移动模块</a>
				</dd>
				<dd>
					<a href="">后台模版</a>
				</dd>
				<dd>
					<a href="">电商平台</a>
				</dd>
			</dl></li>
		<li class="layui-nav-item"><a href="">产品</a></li>
		<li class="layui-nav-item"><a href="">大数据</a></li>
	</ul>

    <!-- 面包屑 -->
    <div class="layui-input-block">
	<span class="layui-breadcrumb"> 
	   <a href="">首页</a> 
	   <a href="">国际新闻</a>
	   <a href="">亚太地区</a> 
	   <a><cite>正文</cite></a>
	</span>
    </div>
    
    <div class="layui-input-block">
	<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a>
		<a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a>
	</span>
	</div>
    
    <div class="layui-input-block">
	<span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a>
		<a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a>
		<a href="">游戏</a> <a href="">综艺</a>
	</span>
	</div>

	<script src="../../layui/layui.js"></script>
<script> 
//一般直接写在一个js文件中
layui.use('element', function(){
  var element = layui.element();  
  
});
</script> 
</body>


hellorichen
关注
专栏目录
layerUI的学习（一）
qq_27009517的博客
06-01 4209
入门 layui适用于开发后端模式，服务端页面 layui基于dom驱动 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入需要的js和css --> <script src="layui/layui.js" type="text/javascript" charset="utf-8
Layui学习笔记
计算机源码之家的博客
10-05 381
Layui目录 Layui目录Layui目录一、概述1. 下载2.下载文件说明二、内容1. 图标2. 按钮3. 导航菜单4. 选项卡5. 进度条6. 面板+布局7. 徽章8. 时间线9. 动画10. 颜色选择器11. 滑块12. 评分13. 轮播14. 代码修饰器15. 时间和日期选择器16. 表单元素17. 表单对象form18. 弹出层【重点】19. 数据表格【重点】20. 数据表格+弹出层的综合案例【重点】21. 文件上传22. 树形组件dtree三、使用方法3.1图标3.2按钮3.3事件监听3.4导
LayUI
Hello_zbs的博客
09-02 495
LayUI 的安装及使⽤ LayUI 的介绍 layui（谐⾳：类UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。 由国⼈开发，16年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和Bootstrap有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后端⼈员的开发成本。 官⽹：https://ww
Layui——实现弹出层中的form表单验证（lay-verify不生效）
最新发布
戏拈秃笔的博客
08-11 715
​弹出层的表单验证和普通的表单验证不同，弹出层的表单验证使用的是弹出层的提交按钮，而该按钮并没有和lay-verify绑定，也就无法触发表单验证。 实现思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。
layui学习博客推荐
qq_41617901的博客
08-20 104
https://www.kancloud.cn/hongwei_ui_team/layui/471931
layui的树形菜单
So_hhh的博客
10-06 5152
本来在此次项目中用的是easyui，但是在之前看到了layui做出来的样式比easyui好看的多，所以这次项目用的是layui做一个后台页面。   这是定义的一个树形菜单的样式，我会把css样式和js代码放下面 在这也是参考了：https://blog.csdn.net/nb7474/article/details/79413460/    https://www.cnblogs.com/...
layui学习笔记——导航
尽力漂亮的博客
04-28 792
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui导航学习</title> <!-- 新 layui 核心 CSS 文件 --> <link rel="stylesheet" href="layuiadmin...
Layui学习笔记，隔壁都馋哭了
m0_64384202的博客
12-07 1625
添加一个Tab 切换用户管理 删除商品管理 删除所有tab 简单风格的Tab 网站设置 用户管理 权限分配 商品管理 订单管理 高度默认自适应，也可以随意固宽。 2. Tab进行了响应式处理，所以无需担心数量多少。 内容2 内容3 内容4 内容5 卡片风格的Tab 网站设置 用户管理 权限分配 商品管理 订单管理 高度默认自适应，也可以随意固宽。 2. Tab进行了响应式处理，所以无需担心数量多少。 内容2 内容3 内容4 内容5 3.6进度条 ..
Layui 学习笔记
weixin_36944798的博客
04-23 284
https://www.layui.com/doc/modules/element.html 网站设置 商品管理 订单管理 内容1 内容2 内容3 layui.use(‘element’, function(){ var element = layui.element; //一些事件监听 element.on(‘tab(d...
【前端】layui前端框架学习笔记，2024年最新大厂hr面试问题
m0_60707660的博客
04-18 733
yyyy-MM-dd通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下格式符说明yyyy年份，至少四位数。如果不足四位，则前面补零y年份，不限制位数，即不管年份多少位，前面均不补零MM月份，至少两位数。如果不足两位，则前面补零。M月份，允许一位数。dd日期，至少两位数。如果不足两位，则前面补零。d日期，允许一位数。HH小时，至少两位数。如果不足两位，则前面补零。H小时，允许一位数。mm分钟，至少两位数。
基于layUI极简博客模板.zip
07-15
内容描述： 极简博客模板，核心采用layui。 详情： 1、基于layUI框架开发的前端静态模板，开箱即用。 2、只需要稍加修改变可以完美复用。 3、提供最新的layUI官网地址：https://layui.gitee.io/v2/ 4、参考官网可以快速对前端模板进行个性化定制
layui个人博客前端模板
10-31
layui个人博客前端模板 layui个人博客前端模板 layui个人博客前端模板
TP5.1+layui前后台齐全的博客系统源码.zip
07-18
框架主要使用 thinkphp 5.1 + layui。后台基于99Admin进行开发，具备auth权限认证管理功能，后台路径可以自行定义，防止别人能够轻易找到你的后台地址。权限节点可以自动进行更新，无需手动刷新。另外集成了博客社区系统、QQ快捷登录、七牛云上传、阿里大于短信。
lay_ui前端框架+支付宝接口
03-12
前端框架+加支付宝接口 类似于云支付的代码 内附有word文档
layui
qq_45461468的博客
06-13 273
第一次来写博客~，哈哈！ Layui作为一个前端框架，用起来是十分的方便，并且官方文档中还有很多的模板可以参考。作为一个小白，首次接触layui还是比较茫然的，不知道如何去下手，网上搜索的博客也是杂七杂八的，起初看了一个多小时还是不明所以，作为一个走过来的小白，希望能给其他像我一样的小白一点经验，让他们少走一点弯路。 首先，当你搜索”layui教程”，你会发现许多博客都是给你贴脸丢一堆代码的截图啥的，瞬间就懵逼了。又或者你会发现，我搜索的是layui教程，为啥给我讲layer，看了一半就感觉受骗了。 那么，
layUI之入门
weixin_67465673的博客
07-07 2575
目录一、layui简介 1.什么是layui2.layui、easyui与bootstrap的对比 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）2.2 layui和easyui对比 3.layui入门 3.1路径问题 入门案例：点击弹出框 ​编辑②接着我们新建一个jsp页面叫demo1 二、自定义模块 1.如何扩展一个layui(自定义模块) 参考 模块规范 1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）静态资源：cs
“layui助力博客管理升级！用增删改查功能打造优质博客体验“
2201_75869073的博客
07-15 1325
通过本文的指导，你可以快速上手使用 layui 构建会议管理系统，并根据实际需求进行扩展和定制。希望本文对你有所帮助！
"前端框架LayUI学习笔记总结与实践指南
《学习笔记》前端框架LayUI.pdf是一本介绍LayUI前端框架的学习笔记。LayUI是一个全新的前端UI框架，它结合了HTML、CSS和JS等技术，旨在简化前端开发过程，提高效率。本文总结了LayUI的基本概念、使用方法和常用功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值