layui的优缺点详解

在这里插入图片描述

优点：
Layui作为国内开源的前端UI，简单易用，界面简单美观。目标对象是对前端不太了解的后端开发人员，它也适用于后端开发人员。
（1） Layui是一个轻量级框架，简单而美观。适用于后端模式的开发，对服务器页面有很好的效果。
（2） Layui是后端开发人员的最佳UI框架。它由Dom驱动。只要不涉及交互，layui仍然很好
缺点：
因为layui是一个个人开源项目，开源时间不长，所以会有很多bug和一些限制。兼容性不强，尤其是在移动端。由于最初的设计意图，layui仅适用于小型项目。即使是小项目也经常遇到许多问题。官方网站对更好的集成技术收费。

在这里插入图片描述

栅格系统

1.使用layui行定义行，例如，<div class=“layui row”>
2.使用像layui col MD这样的预设类来定义一组列并将它们放入行中。其中：
变量MD表示不同屏幕下的标记（可选值见下文）
变量表示该列占用的12个等分（例如6/12）。可选值为1-12
如果多列的“平分线值”之和等于12，则该行刚好满。如果大于12，额外列将自动开始新行。
3.该栏可以同时有四种不同的组合，即：XS（超小屏幕，如手机）、Sm（小屏幕，例如平板电脑）、MD（桌面中屏幕）和LG（桌面大屏幕），以呈现更动态和灵活的布局。
4.可以向列中添加诸如layui-col-space5和layui-col-md-offset3等预设类，以定义列的间距和偏移。
5.最后，在column元素中放置自己的任意元素，以填充内容并完成布局！

<body>
		<div class="layui-container">
			<!-- 定义行-->
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md5" style="background-color: #007DDB;">
					内容5/12
				</div>
				<div class="layui-col-md7" style="background-color: #00F7DE;">
					内容7/12
				</div>
			</div>
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md4" style="background-color: #EB7350;">
					内容4/12
				</div>
				<div class="layui-col-md4" style="background-color: #FFB800;">
					内容4/12
				</div>
				<!-- 超过12会自动换行 -->
				<div class="layui-col-md6" style="background-color: #C2C2C2;">
					内容6/12
				</div>
			</div>
			<div class="layui-row">
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">
			      移动：4/12 | 平板：12/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">
			      移动：4/12 | 平板：7/12 | 桌面：8/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">
			      移动：4/12 | 平板：5/12 | 桌面：4/12
			    </div>
			  </div>
		</div>
	</body>

在这里插入图片描述

按钮

名称组合
原始class=“layui BTN layui BTN main”
默认类＝“layui BTN”
野生类＝“layui BTN layui BTN正常”
暖色类＝“layui BTN layui BTN暖”
警告等级＝“layui BTN layui BTN危险”
使残废
Class=“layui BTN layui禁用BTN”

在这里插入图片描述

菜单

菜单是页面的基本元素。我们希望它是通用的，所以它的结构非常灵活。事实上，在基本菜单正式推出之前，垂直导航（layui导航树）已经取代了它的角色，尤其是在管理系统中。虽然它们在本质上都属于“菜单”的范畴，但我们同意，水平菜单称为“导航”，垂直菜单称为正统的“基本菜单”。它将非常有用，可以在许多业务场景中看到。

可依赖的模块：dropdown

列表类型及其子菜单是相同的。需要注意的是，“可收缩菜单组”的子菜单只需要嵌套一层UL；“水平父子菜单”还需要一组div class=“layui panel”和“layui menu body panel”，以使子菜单更加清晰。

<li lay-options="{
  id: 100
  ,title: 'menu item 1'
  ,type: '' //支持的类型有：group、parent，具体用法参见上文
  ,aaa: '任意参数'
}">内容</li>

评分组件

费率评分组件在电子商务和o2o平台中特别常见，通常用于评估商家的服务满意度。外形依然小巧自然，功能依然灵活实用。对应于分数的用户定义的内容功能可以给它更多的播放空间。此组件是2.3.0版中的新组件。

在这里插入图片描述

关闭半星功能：
如果十进制值大于0.5，则分数将向上取整。例如，如果分数为3.6，系统将自动将其更改为4
小于或等于0.5的小值：分数向下舍入，例如3.2分，系统将自动变为3分
如果在关闭半星函数的同时打开文本，将发现的分数将相应地变为整数
打开半星功能：
无论的十进制值是0.1还是0.9，都统一计划为0.5。打开文本时，可以看到的分数没有变化。

settex

settext函数在首次呈现和单击组件时生成回调。我们的默认文本以星形显示。可以根据自己的文本替换我们的默认文本，例如“恨”和“喜欢”。如果用户在没有设置相应文本的情况下选择分数，系统将使用我们的默认文本

rate.render({
  elem: '#test1'
  ,setText: function(value){
    var arrs = {
      '1': '极差'
      ,'2': '差'
      ,'3': '中等'
      ,'4': '好'
    };
    this.span.text(arrs[value] || ( value + "星"));
  }
});

使用layui框架实战之栅格系统和菜单评分组件运用心得

文章目录

layui的优缺点详解

栅格系统

按钮

菜单

评分组件

settex

相关推荐