文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

layui框架教程

2024-04-02 19:55

关注

LayUI

layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架,它更多是面向后端开发者,无需涉足前端各种工具,只需面对浏览器本身,让一切所需要的元素与交互。

LayUI的特点

1:layui属于轻量级框架,简单美观,适用于后端开发模式,它在服务端页面上有非常好的效果

2:layuu是提供给后端开发人员的ui框架,基于DOM驱动

LayUI

基本使用

1.下载layui

官网:https://layuion.com/

2.安装、引入依赖

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="application/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<script>
		layui.use(['layer', 'form'], function(){
		  var layer = layui.layer
		  ,form = layui.form;
		  
		  layer.msg('Hello World');
		});
		</script> 
	</body>
</html>

需要声明使用的模块和回调函数,参照官方文档,选择自己想要的效果即可。

比如:

<script>
		layui.use(['element'], function(){
			var element = layui.element;
            //...
		});
	</script> 

页面元素

布局

1.固定宽度--两边有空白常用

<div class="layui-container" style="background-color:navajowhite ;height: 300px;">
			固定宽度
		</div>

2.完整宽度--占据宽度的100%

<div class="layui-fluid" style="background-color:navajowhite ;height: 300px;">
			完整宽度
		</div>

栅格系统

采用layui-row来定义行

<div class="layui-row">
		</div>
<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md5" style="background-color: deepskyblue;">
					内容的5/12
				</div>
				<div class="layui-col-md7" style="background-color: bisque;">
					内容的7/12
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md4" style="background-color: powderblue;">
					内容的4/12
				</div>
				<div class="layui-col-md4" style="background-color: mediumaquamarine;">
					内容的4/12
				</div>
			</div>
		</div>

响应式规则

css媒体查询(Media Queries)的强力支持,从而针对不同尺寸的屏幕进行相应的适配处理。

类型超小屏幕手机(<768px)小屏幕手机(平板>=768px)中等屏幕(桌面>=992px)大型屏幕(桌面>=1200px
.layui-container的值auto750px970px1170px
标记xssmmdlg
列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*
总列数12121212
相应行为始终an设定的比例水平排列在当前屏幕下水平排列,如果屏幕的大小低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕的代销低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列
<div class="layui-row">
    <div class="layui-col-md5 layui-col-sm6">
        响应式规则
    </div>
</div>

列边距:

通过“列边距”的预设类,来设定之间的间距。且一行中最左的列不会出现左边距,最右边的列不会出现右边距。列边距在保证排版美观的同时,还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距,预设了12中不同的尺寸的边距。


layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
.....
<div class="layui-row layui-col-space10">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4" style="background-color: powderblue;">4</div>
		<div class="layui-col-md4" style="background-color: mediumaquamarine;">4</div>
	</div>

注:

1.layui-col-space,设置后起不到作用因为设置的是padding也就是说向内缩,所以设置背景色padding也是会填上颜色,看起来好像没有间距一样,可以再里面在加一个div,来达到目的。

2.间距一般不高于30px,如果超过30,建议使用列偏移

列偏移

​对列最佳类似layui-col-md-offset* 的预设类,从而让列向右偏移。其中*代表的是偏移占据的列数,可选中为1-12

如:layui-col-md-offset3,即和代表在“中型桌面屏幕下,让该列向右偏移3个列表宽度

<div class="layui-row ">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4 layui-col-md-offset2" style="background-color: powderblue;">4</div>
	</div>

注:

​列偏移可针对不同屏幕的标准进行设定,在当前设定屏幕下最有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。

列嵌套

可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row),即可完成嵌套。

<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6">
					<div style="background-color: darkturquoise;">
						<div class="layui-row">
							<div class="layui-col-md5" style="background-color: seashell;">内部5</div>
							<div class="layui-col-md5" style="background-color: mistyrose;">内部5</div>
							<div class="layui-col-md2" style="background-color: aqua;">内部5</div>
						</div>
					</div>
				</div>
			</div>
		</div>

基本元素

按钮

​向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。

主题

名称组合
原始class="layui-btn layui-btn-primary"
默认class="layui-btn"
百搭class="layui-btn layui-btn-normal"
暖色class="layui-btn layui-btn-warm"
警告class="layui-btn layui-btn-danger"
禁用class="layui-btn layui-btn-disabled"

中间是空心:

名称组合
主色class="layui-btn layui-btn-primary layui-border-green"
百搭class="layui-btn layui-btn-primary layui-border-blue"
暖色class="layui-btn layui-btn-primary layui-border-orange"
警告class="layui-btn layui-btn-primary layui-border-red"
深色class="layui-btn layui-btn-primary layui-border-black"

尺寸:

尺寸组合
大型class="layui-btn layui-btn-lg"
默认class="layui-btn"
小型class="layui-btn layui-btn-sm"
迷你class="layui-btn layui-btn-xs"
尺寸组合
大型百搭class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色class="layui-btn layui-btn-warm"
小型警告class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用class="layui-btn layui-btn-xs layui-btn-disabled"

流体自适应

<button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>

圆角

主题组合
原始class="layui-btn layui-btn-radius layui-btn-primary"
默认class="layui-btn layui-btn-radius"
百搭class="layui-btn layui-btn-radius layui-btn-normal"
暖色class="layui-btn layui-btn-radius layui-btn-warm"
警告class="layui-btn layui-btn-radius layui-btn-danger"
禁用class="layui-btn layui-btn-radius layui-btn-disabled"
尺寸组合
大型百搭class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

图标

<button type="button" class="layui-btn">  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">  <i class="layui-icon layui-icon-left"></i></button>

默认按钮 样式 大小 圆角 流动自适应

**i 图标 样式 **

导航

​导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,面包屑结构简单、支持自定义分隔符

​依赖加载的模块:element

实现的步骤:

引入的资源:

<link rel="stylesheet" href="layui/css/layui.css"/>
		<script type="application/javascript" src="layui/layui.js"></script>

例子:

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

垂直样式+侧边

class="layui-nav layui-nav-tree layui-nav-side"

背景颜色

样式往后加:layui-bg-orange

徽章

直接对应往后加

面包屑

<span class="layui-breadcrumb">  
    <a href="">首页</a>  
    <a href="">国际新闻</a> 
    <a href="">亚太地区</a>  
    <a><cite>正文</cite></a>
</span>

选项卡

引入资源:

<link rel="stylesheet" href="layui/css/layui.css"/>
		<script type="application/javascript" src="layui/layui.js"></script>
<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>

风格

默认风格:

简洁风格追加样式:

卡片风格追加样式:

带删除

对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

表格

<table class="layui-table" lay-even>
	  <colgroup>
	    <col width="150">
	    <col width="200">
	    <col>
	  </colgroup>
	  <thead>
	    <tr>
	      <th>昵称</th>
	      <th>加入时间</th>
	      <th>签名</th>
	    </tr> 
	  </thead>
	  <tbody>
	    <tr>
	      <td>贤心</td>
	      <td>2016-11-29</td>
	      <td>人生就像是一场修行</td>
	    </tr>
	    <tr>
	      <td>许闲心</td>
	      <td>2016-11-28</td>
	      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
	    </tr>
	  </tbody>
</table>

风格

静态表格支持以下基础属性,可定义不同风格/尺寸的表格样式:

属性名属性值备注
lay-even用于开启 隔行 背景,可与其它属性一起使用
lay-skin="属性值"line (行边框风格) row (列边框风格) nob (无边框风格)若使用默认风格不设置该属性即可
lay-size="属性值"sm (小尺寸) lg (大尺寸)若使用默认尺寸不设置该属性即可

表单

常用属性

文本框:

引入依赖

<link rel="stylesheet" href="layui/css/layui.css"/>
<script type="application/javascript" src="layui/layui.js"></script>

1.给定form容器

class=“layui-form”

<form class="layui-form" action=""> 
</form>

2.基本的行区块结构,它提供了相应是的支持,可以换成其他结构,但必学要在外层容器中定义class=“layui-form”,form模块才能正常工作

<form class="layui-form">
			<div class="layui-form-item">
			    <label class="layui-form-label">标签区域</label>
			    <div class="layui-input-block">
			        <input type="text" name="tite" class="layui-input"/>
			    </div>
			</div>
		</form>

输入框

<input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">        

下拉框

<select name="city" lay-verify="required">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>     
<select name="quiz">
	 <option value="">请选择</option>
	<optgroup label="城市记忆">
	 <option value="你工作的第一个城市">你工作的第一个城市?</option>
	</optgroup>
	<optgroup label="学生时代">
	 <option value="你的工号">你的工号?</option>
	<option value="你最喜欢的老师">你最喜欢的老师?</option>
	 </optgroup>
</select>

复选框

默认风格:
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
原始风格:
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 

开关

其实就是checkbox复选框的“变种”,通过设定 lay-skin="switch" 形成了开关风格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

单选框

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

文本域

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

组装行内表单

div class="layui-form-item">
 
  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <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" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>
  
</div>

忽略美化渲染

<select lay-ignore>
  <option>…</option>
</select>

方框效果

通过追加 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>

弹出层

引入依赖:

<link rel="stylesheet" href="layui/css/layui.css"/>
	<script type="application/javascript" src="layui/layui.js"></script>

模块化:

layer 作为 Layui 的代表性组件 ,比 Layui 要出现的早,作为 Layui 最早的源动力,layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能,也是许多开发者的网页弹出层的首选交互方案,在各类场景都能发挥重要作用。

场景用前准备
1. 作为独立组件使用如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8 以上的任意版本,并引入layer.js。
2. 作为 layui 组件使用如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js

到此这篇关于layui框架教程的文章就介绍到这了,更多相关layui使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯