使用layui框架实战之栅格系统和菜单评分组件运用心得
@[toc]
layui的优缺点详解
优点：
Layui作为国内开源的前端UI，简单易用，界面简单美观。目标对象是对前端不太了解的后端开发人员，它也适用于后端开发人员。
（1） Layui是一个轻量级框架，简单而美观。适用于后端模式的开发，对服务器页面有很好的效果。
（2） Layui是后端开发人员的最佳UI框架。它由Dom驱动。只要不涉及交互，layui仍然很好
缺点：
因为layui是一个个人开源项目，开源时间不长，所以会有很多bug和一些限制。兼容性不强，尤其是在移动端。由于最初的设计意图，layui仅适用于小型项目。即使是小项目也经常遇到许多问题。官方网站对更好的集成技术收费。
栅格系统
1.使用layui行定义行，例如，<div class=“layui row”>
这样的预设类来定义一组列并将它们放入行中。其中：
变量MD表示不同屏幕下的标记（可选值见下文）
变量
<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 + "星"));
}
});
- 点赞
- 收藏
- 关注作者
评论（0）