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

Posted 黎燃黎燃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用layui框架实战之栅格系统和菜单评分组件运用心得相关的知识，希望对你有一定的参考价值。

@[toc]

layui的优缺点详解

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

栅格系统

1.使用layui行定义行，例如，<div class=“layui row”></div>
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导航树）已经取代了它的角色，尤其是在管理系统中。虽然它们在本质上都属于“菜单”的范畴，但我们同意，水平菜单称为“导航”，垂直菜单称为正统的“基本菜单”。它将非常有用，可以在许多业务场景中看到。

列表类型及其子菜单是相同的。需要注意的是，“可收缩菜单组”的子菜单只需要嵌套一层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栅格系统与后台框架布局

干货之运用CALayer创建星级评分组件（五角星）

LayUI前端框架开发视频讲解

Leyui的运用之表格渲染

layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询导入导出群发短信一键审核照片展示隐私加密）

LayUI前端框架开发视频讲解