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

最新推荐文章于 2023-08-16 17:30:14 发布
最新推荐文章于 2023-08-16 17:30:14 发布
阅读量2.2k 收藏 13
点赞数 1
文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipity_xr/article/details/119916202
版权

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

serendipity_xr
关注
Layui-导航
chen2745213271的博客
12-09 5650
这次介绍layui里面的导航栏的样式，首先导航栏的功能依附于element模块，所以想要使用layui的导航栏功能就需要启用该模块，其次是layui的css样式，有了这两样layui里的导航栏就可以正常的使用了，下面我将介绍如何启用模块和css样式的各种用法 首先启用模块，如下图 下面就是HTML的部分了 首先是水平导航栏，在外层使用ul标签并使用class名layui-nav作为导航栏的容器，接着下面的li子标签需要使用class名layui-nav-item，其次layu...
Layui快速入门之第五节 导航
qq_61313896的博客
09-13 2039
Layui快速入门之第五节 导航
layui导航.rar
08-06
针对layui页面导航逻辑：头部导航点击左侧显示下一级导航，左侧具有收缩功能，收缩后弹出类似adminlte插件的效果，导航链接可对内容区加载相应页面 -针对layui框架做出的更改， -引入navbar.js和tab.js两个js插件， -并进行方法的新增和修改 -针对admin.css直接做的调整， -连接方法layui的jq实现 注：需要在环境下运行
LayUI中的基本元素之导航
daimeijin的博客
08-12 1046
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 导航 依赖加载模块：element 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 elemen
layui框架学习（4：导航）
gc_2299的博客
01-31 2839
学习并记录layui框架中页面元素的导航相关内容。
layui tab选项卡外部html页面,layui tab选项卡默认/切换定位所在选项
weixin_36221525的博客
06-03 1719
使用layui时，tab切换当弹出页面改变某一选项区中的内容后，让其其他内容同步刷新，且内容选项定位在指定的区域；1、html：订单信息商品信息审核记录1111111111111111333333332、javascript：layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'element'], function() {var f...
layui 卡片式列表_Layui——选项卡加载table数据列表
weixin_39747577的博客
12-20 2375
效果：2个tabel 进入页面的时候 同事ajax拉取了数据 点击选项卡展示不同的tabelhtml代码储值卡充值关注技师View CodeJS代码layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','laytpl'], function(){var $ = layui.jquer...
基于layui2.7RC5 Sortable拖拽组件开发的一款简洁易用，功能强大的表单设计器
03-25
基于layui Sortable拖拽组件完成的表单设计器，其中包含layui表单自有的大部分组件，包含第三方级联选择器、tags标签，在布局方面支持TAB选项卡，GRID栅格布局，代码通俗易懂，开箱即用
layui 横向表单_layui框架中常见表单排版介绍
weixin_39992072的博客
12-20 2081
平常我们经常用到的表单排版方式常见的有两种，layui文档中已经给出垂直的排版方式，我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。推荐：layui教程下面我们来看一下水平+垂直表单列表实现：一、水平排版html:新增商品状态：启用禁用暂时创建时间：style="width: 240px;">搜索公共css:(包括主题颜色修改).fl { float: left; ...
LayUI选项卡的使用
liaozhixiangjava的博客
07-13 2838
选项卡（Tab）是计算机界面中常见的一种元素，用于在同一个窗口或应用程序中同时显示多个页面或功能。每个选项卡代表一个独立的页面或功能，用户可以通过点击选项卡来切换不同的内容。通常，选项卡以水平或垂直的方式排列在窗口的顶部或侧边，每个选项卡上通常会显示一个标签，标注该选项卡所代表的内容或功能。当用户点击某个选项卡时，该选项卡的内容会在主窗口中显示，其他选项卡的内容则会被隐藏。选项卡的使用可以提高用户界面的可用性和效率，让用户可以在不打开多个窗口或应用程序的情况下同时访问多个页面或功能。
layui实现三级导航菜单
10-16
主要为大家详细介绍了layui实现三级导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Layui框架的卡片式表格设计源码
最新发布
09-24
该项目是基于Layui框架的卡片式表格设计源码，主要使用JavaScript语言开发。项目文件总计54个，包括24个JavaScript文件、9个GIF图片文件、7个CSS样式文件、3个PNG图片文件、2个JSON配置文件、1个Git忽略文件、1个LICENSE文件、1个Markdown文档和1个HTML页面。此外，还包含1个EOT字体文件。该项目参考了pear-admin的卡片界面设计，并已开源，遵循MIT协议。目前，该组件被应用于WaterCloud框架中，后端采用Net6技术，前端则基于layui-mini框架，实现了对Layui组件的深度封装。
基于Layui框架，二次开发菜单导航
mufabixin的博客
04-11 1591
基于Layui框架，二次开发菜单导航
layui tab导航
qq_42782011的博客
04-12 770
最近在做一个带有tab导航的页面，分享一下前端代码： <div class="layui-tab layui-tab-brief tab-change" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title tabChanges" style="width: 100%; border-bottom-style: none !important;margin:2% 1% 3% 1%;">
layui导航栏
OpenSource_的博客
08-06 1907
LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。 LayUI优点 由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支持响应式。 La...
【Layui】选项卡Tab：完美实现网页内容分类与导航
无法自律的人的博客
07-12 6328
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
layUi 格栅布局 导航菜单 轮播 表单
qq_62363650的博客
08-16 453
【代码】layUi 格栅布局 导航菜单 轮播 表单。
layui 卡片式列表_UITableViewCell系列之(三)卡片式列表
weixin_39605840的博客
12-20 710
上一篇中介绍了UITableViewCell视觉差滚动效果。本篇文章介绍UITableViewCell的圆角效果，确切的说是，UITableView的每个section四个角的圆角效果。不想读文字的同学可以直接看代码.效果图如下：cornerRadius.gif步骤备注：以下操作全部是在- (void)tableView:(UITableView *)tableView willDisplayCe...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值