layui的导航,选项卡,表格,表单

layui

页面元素

一. 导航

  • 先引入layui.css和layui.js
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
  • 加载 element模块
<script type="text/javascript">
	//导航,依赖element模块
	layui.use('element',function(){
		var element = layui.element;
	});
</script>
<!--
	导航
		水平导航:layui-nav
			layui-nav-item 表示的是导航的子项
			layui-this 表示当前被选中的项
			layui-nav-child 表示的是二级菜单
		垂直导航:layui-nav layui-nav-tree
		侧边导航:layui-nav layui-nav-tree layui-nav-side
		导航的主题颜色
			layui-bg-颜色
				墨绿 molv
				藏青cyan
				艳蓝blue
		面包屑导航
			<span class="layui-breadcrumb"  lay-separator="|">
		通过lay-separator="分隔符"设置面包屑导航的分隔符
		-->

1.水平导航

  • layui-this指向当前页面分类
<!--水平导航  layui-nav-->
<ul class="layui-nav">
	<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="">大数据</a></li>
	<li class="layui-nav-item">
		<a href="">解决方案</a>
		<dl class="layui-nav-child">
			<dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模块</a></dd>
			<dd><a href="">电商模块</a></dd>
		</dl>
	</li>
</ul>

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

2.垂直导航

<!--垂直导航 layui-nav layui-nav-tree-->
<ul class="layui-nav layui-nav-tree">
	<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="">大数据</a></li>
	<li class="layui-nav-item">
		<a href="">解决方案</a>
		<dl class="layui-nav-child">
			<dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模块</a></dd>
			<dd><a href="">电商模块</a></dd>
		</dl>
	</li>
</ul>

在这里插入图片描述

3.侧面导航

<!--侧边导航  layui-nav layui-nav-tree layui-nav-side -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
	<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="">大数据</a></li>
	<li class="layui-nav-item">
		<a href="">解决方案</a>
		<dl class="layui-nav-child">
			<dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模块</a></dd>
			<dd><a href="">电商模块</a></dd>
			
		</dl>
	</li>
</ul>

在这里插入图片描述

4.设置导航的主题颜色

<!--设置导航的主题颜色 <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">-->
<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
	<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="">大数据</a></li>
	<li class="layui-nav-item">
		<a href="">解决方案</a>
		<dl class="layui-nav-child">
			<dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模块</a></dd>
			<dd><a href="">电商模块</a></dd>
		</dl>
	</li>
</ul>

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

5.面包屑导航

  • <cite></cite>选中状态
<!--面包屑导航-->
<span class="layui-breadcrumb">
	<a href="">首页 </a>
	<a href="">国际新闻 <span class="layui-badge">99</span></a>
	<a href="">亚太地区</a>
	<a><cite>正文<span class="layui-badge-dot"></span></cite></a>
</span>		

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

  • 用指定分隔符来分隔
<!--设置属性 lay-separator="-"/lay-separator="|" 来自定义分隔符-->
<spanclass="layui-breadcrumb"  lay-separator="|">
	<a href="">首页 </a>
	<a href="">国际新闻</a>
	<a href="">亚太地区</a>
	<a><cite>正文</cite></a>
</span>

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

徽章详细请查看官方文档:https://www.layui.com/doc/element/badge.html
导航详细请查看官方文档:https://www.layui.com/doc/element/nav.html

二.选项卡

1.实现步骤

1.1引入资源(layui.css和layui.js)

<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>

1.2依赖加载模块

<script type="text/javascript">
//选项卡也是依赖element模块
	layui.use('element',function(){
		var element = layui.element;
	});
</script>

1.3加载HTML

<div class="layui-tab">
	<ul class="layui-tab-title">
		<li class="layui-this">网站设置</li>
		<li>用户权限</li>
		<li>权限分配</li>
		<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 class="layui-tab-item">内容4</div>
		<div class="layui-tab-item">内容5</div>				
	</div>
</div>

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

2.选项卡风格

  • 默认风格:layui-tab
  • 简约风格需要追加class:layui-tab-brief
  • 卡片风格需要追加class:layui-tab-card

2.1简约风格

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title">
		<li class="layui-this">网站设置</li>
		<li>用户权限</li>
		<li>权限分配</li>
		<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 class="layui-tab-item">内容4</div>
		<div class="layui-tab-item">内容5</div>				
	</div>
</div>

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

2.2卡片风格

<div class="layui-tab layui-tab-card">
			<ul class="layui-tab-title">
				<li class="layui-this">网站设置</li>
				<li>用户权限</li>
				<li>权限分配</li>
				<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 class="layui-tab-item">内容4</div>
				<div class="layui-tab-item">内容5</div>				
			</div>
		</div>

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

2.3带删除的选项卡

<!--带删除的选项卡-->
		<!--对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除-->
		<div class="layui-tab layui-tab-card" lay-allowClose="true">
			<ul class="layui-tab-title">
				<li class="layui-this">网站设置</li>
				<li>用户权限</li>
				<li>权限分配</li>
				<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 class="layui-tab-item">内容4</div>
				<div class="layui-tab-item">内容5</div>				
			</div>
		</div>

结果展示:
在这里插入图片描述
选项卡详细请查看官方文档:https://www.layui.com/doc/element/tab.html

三.表格

  • 引入layui.css
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!--
	表格
		class="layui-table"
	常用属性
		lay-even 如果设置了该属性,则可以显示隔行换色的效果
		lay-skin="属性值"  设置表格边框风格	
			line (行边框风格)
			row (列边框风格)
			nob (无边框风格)
		lay-size="属性值"	 设置表格的尺寸
			sm (小尺寸)
			lg (大尺寸)
		-->
  • eg1:
<table class="layui-table">
		  <colgroup>
		    <col width="150">
		    <col width="200">
		    <col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>昵称</th>
		      <th>加入时间</th>
		      <th>签名</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td>lucky</td>
		      <td>2021-8-15</td>
		      <td>人生就像是一场修行</td>
		    </tr>
		    <tr>
		      <td>lover</td>
		      <td>2020-1-28</td>
		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
		    </tr>
		  </tbody>
		</table>

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

  • eg2:
<table class="layui-table" lay-even lay-skin="line" lay-size="lg">
		  <colgroup>
		    <col width="150">
		    <col width="200">
		    <col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>昵称</th>
		      <th>加入时间</th>
		      <th>签名</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td>白娘子</td>
		      <td>2021-11-29</td>
		      <td>人生就像是一场修行</td>
		    </tr>
		    <tr>
		      <td>许仙</td>
		      <td>2021-11-28</td>
		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
		    </tr>
		    <tr>
		      <td>小青</td>
		      <td>2021-5-7</td>
		      <td>人生就像是一场修行</td>
		    </tr>
		    <tr>
		      <td>许闲心</td>
		      <td>2021-1-28</td>
		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
		    </tr>
		  </tbody>
</table>

结果展示:
在这里插入图片描述
表格详细请查看官方文档:https://www.layui.com/doc/element/table.html

四.表单

1.实现步骤

1.1引入资源(layui.css和layui.js)

<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>

1.2依赖加载模块

<!--加载模块-->
<script type="text/javascript">
		//加载form表单
		layui.use('form',function(){
			var from = layui.form;
		});
</script>

1.3加载HTML

  • 在一个容器中设定 class=“layui-form” 来标识一个表单元素块
  • 基本的行区块结构,它提供了响应式的支持。但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。

2.输入框

  • required:注册浏览器所规定的必填字段
  • lay-verify:注册form模块需要验证的类型
  • class=“layui-input”:layui.css提供的通用CSS类
<!--
	表单
		常用属性:
			required   浏览器固定的必填字段
			lay-verify    需要验证的类型(required表示必填项)
			class="layui-input"  提供通用的样式
			class="layui-input-block"  占据全部宽度
			class="layui-input-inline"  占据部分宽度
		文本框
			placeholder  当文本框为空时,默认显示的文本信息
			autocomplete  表单元素是否自动填充(当浏览器中缓存中存在相同的name属性的值时,会填充)
-->
<!--在一个容器中设定 class="layui-form" 来标识一个表单元素块-->
<form action="" class="layui-form">
	<!--基本的行区块结构,它提供了响应式的支持。但必须要在外层容器中定义class="layui-form",form模块才能正常工作。-->
	<div class="layui-form-item">
		<label class="layui-form-label">标题</label>
		<div class="layui-input-inline">
			<!--文本框-->
			<input type="text" name="title" required lay-verify="required"
				 placeholder="请输入标题" autocomplete="off" class="layui-input">    
		</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>
	</div>
</form>

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

3.下拉选择框

  • 通过selected属性设置默认选中项selected="selected"相当于selected
  • 通过disabled属性开启禁用,可以设置select和option标签(禁用下拉框和禁用下拉选项)
  • 可以通过optgroup标签给select分组
  • 通过设置lay-search属性开启搜索匹配功能
<select name="city" lay-verify="required" disabled="disabled">
	<option value="">请选择一个城市</option>
	<option value="010">北京</option>
	<option value="020">上海</option>
	<option value="030" selected="selected">广州</option>	
	<option value="040" disabled="disabled">陕西</option>
</select>
<!--分组-->
<select name="quiz">
	<option value="">请选择</option>
	<optgroup label="城市记忆">
	 	<option value="你工作的第一个城市">你工作的第一个城市?</option>
	</optgroup>
	<optgroup label="学生时代">
		<option value="你的工号">你的工号?</option>
		<option value="你最喜欢的老师">你最喜欢的老师?</option>
	</optgroup>
</select>
<!--开启搜索匹配-->
<select name="city" lay-verify="" lay-search>
	<option value="">请选择</option>						
	<option value="010">layer</option>
	<option value="020">form</option>
	<option value="030">layim</option>						
</select>     

在这里插入图片描述

4.复选框

  • 通过title属性设置自定义文本(如果不需要显示文本,则不设置title属性)
  • 通过checked属性设置被选中的项
  • 通过lay-skin属性设置复选框的样式效果(lay-skin="primary"表示原始效果)
  • 通过disabled属性禁用属性
<!--复选框-->
<div class="layui-form-item">
	<label class="layui-form-label">爱好</label>
	<div class="layui-input-block">
	<!--复选框-->
	<!--默认效果-->
		<input type="checkbox" name="hobby" title="唱歌" checked="checked" value="sing" />
		<input type="checkbox" name="hobby" title="跳舞" value="dance" />
		<input type="checkbox" name="hobby" title="画画" disabled="disabled" />
		<!--原始效果-->
		<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="sing" />
		<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
		<input type="checkbox" name="hobby" title="画画" lay-skin="primary" disabled="disabled" />					
	</div>
</div>

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

5.开关

  • 将复选框,设置lay-skin="switch"形成开关风格
  • 通过lay-text=“打开的值|关闭的值"来设定开关的两种状态的文本,通过”|"分隔
  • 通过checked设置默认打开状态
  • 通过disabled属性禁用开关
  • 通过value属性设置选中的值
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
	<div class="layui-input-block">
		<input type="checkbox" name="aa" lay-skin="switch" />
		<input type="checkbox" name="bb" lay-skin="switch" checked="checked"/>					
		<input type="checkbox" name="cc" lay-skin="switch" checked="checked" lay-text="on|off"/>
		<input type="checkbox" name="dd" lay-skin="switch" checked="checked" lay-text="打开|关闭" value="打开"/>
		<input type="checkbox" name="ee" lay-skin="switch" checked="checked" lay-text="打开|关闭" disabled="disabled"/>				
	</div>
</div>

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

6.单选框

  • 属性title可自定义文本
  • 通过checked设置默认打开状态
  • 通过disabled属性禁用开关
  • 通过value属性设置选中的值,否则选中时返回的就是默认的on
<div class="layui-form-item">
	<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="checked"/>
	<input type="radio" name="sex" value="" title="中性" disabled="disabled"/>
	</div>
</div>	

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

7.文本域

  • class=“layui-textarea”:layui.css提供的通用CSS类
<div class="layui-form-item">
				<label class="layui-form-label">简介</label>
				<div class="layui-input-inline">
					<!--文本域-->
					<textarea name="remark" required="required" lay-verify="required" placeholder="请输入个人简介"
						class="layui-textarea"></textarea>
				</div>
			</div>	

结果展示:

在这里插入图片描述

8.组装行内表单

  • class="layui-inline"定义外层行内
  • class=“layui-input-inline” 定义内层行内
<div class="layui-form-item">
	<!--定义外层行内-->
	<div class="layui-inline">
		<label class="layui-form-label">范围</label>
		<div class="layui-input-inline">
			<input type="text" name="price_min" placeholder="" autocomplete="off" class="layui-input"/>
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline">
			<input type="text" name="price_max" placeholder="" autocomplete="off" class="layui-input"/>
		</div>
	</div>	
	<div class="layui-inline">
		<label class="layui-form-label">密码</label>
		<div class="layui-input-inline">
			<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
		</div>
	</div>
</div>

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

9.忽略美化渲染

<div class="layui-form-item">
	<label class="layui-form-label">原始效果</label>
	<div class="layui-input-inline">
		<!--可以对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格-->
		<input type="radio" name="sex" value="nan" title="" lay-ignore> 
	</div>
</div>		

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

10.表格方框风格

  • 通过追加 layui-form-pane 的class,来设定表单的方框风格
<form class="layui-form layui-form-pane" action="">
<!--内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭),如:-->
<div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="" title="">
      <input type="radio" name="sex" value="" title="" checked>
    </div>
</div>
</form>	

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

表单详细请查看官方文档:https://www.layui.com/doc/element/form.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值