提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

Layui学习笔记，一起加油！

模块 笔记 学习 CSS
2023-03-07 09:43:05 时间

一、Layui

Layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。

二、记录

全局对象 layui，一切从它开始。

建立模块入口，并通过 layui.use() 方式来加载该入口文件，加载指定目录下的index.js文件内的模块。 

<script>
layui.config({
  base: '/res/js/modules/' //你存放新模块的目录，注意，不是 layui 的模块目录
}).use('index'); //加载入口
</script>

 学会use和define方法基本ok，继续往下。主要还是要先了解JS模块化编程

三、Layui css

1.栅格系统，免除了自己写css布局的烦恼。Layui容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。可同时指定四种css，分别在不同设备下生效。列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。总体来时跟css的网格布局差不多，能够快速的进行布置。相比网格布局，灵活性就没这么大了。

栅格系统

容器->行->列，列间距定义在行的级别。

栅格布局规则、响应式规则（不同尺寸的屏幕下如何显示）、响应式公共类（不同大小的屏幕下的布局方式block、none、inline）、列间距、列偏移（1-12）、栅格嵌套（栅格理论上可以无限嵌套）。

2. layui的颜色，https://www.layui.com/doc/element/color.html

3. layui的图标，全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

4.layui的动画，https://www.layui.com/doc/element/anim.html

5.layui的按钮，https://www.layui.com/doc/element/button.html

6.layui的表单依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

2021.9.20，先到这。。。

四、Require.js 加载layui

    /*定义layui模块*/
    require.config(
        {
            "paths": {
                'layui': ['/static/plugs/layui/layui'],
                'jquery': ['/static/plugs/jquery/jquery.min'],
            },
            shim: {
                "layui": {
                    deps: ['jquery'],
                    exports: 'layui'
                } //设置模块要暴露的变量
            }
        }
    )
    
    /*使用模块*/
    require(["layui"], function (layui) {
        layui.config({dir:  '/static/plugs/layui/'});
        layui.use(['layer', 'form', 'laydate'], function () {
            window.layer = layui.layer, window.form = layui.form, window.laydate = layui.laydate;
            layer.msg("test");
        });

    });

结语：在实践中已经融会贯通，正在学习VUE........

相关文章