layui初识

layui

 

是什么？

是一个ui库 UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

大致内容

  1. 观察layui文件内的内部结构

    ├─css //css目录

    │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

    │  │  ├─laydate

    │  │  ├─layer

    │  │  └─layim

    │  └─layui.css //核心样式文件

    ├─font  //字体图标目录

    ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

    │─lay //模块核心目录

    │  └─modules //各模块组件

    │─layui.js //基础核心库

    └─layui.all.js //包含layui.js和所有模块的合并文件

  2. 怎么在代码中引入？

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>开始使用layui</title>
      <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body>
     
    <!-- 你的HTML代码 -->
     
    <script src="../layui/layui.js"></script>
    <script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;
      
      layer.msg('Hello World');
    });
    </script> 
    </body>
    </html>

 

  1. 认识layui：

    1. 模块化

    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;
    });

  2. 公共类：

    • layui-icon  用于图标

    • layui-bg-red  用于设置元素赤色背景

  3. 公共属性

属性描述
lay-skin=" " 定义相同元素的不同风格，如checkbox的开关风格
lay-filter=" " 事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
lay-submit 定义一个触发表单提交的button，不用填写值

  1. 页面元素  (静态)

    1. 只与HTML有关，样式通通通过layui的公共类来实现

  2. 内置模块  (动态)

    • 属性

    • 方法

    • 事件

[其他的就需要自己去查，最好把常用的元素以及模块用熟，但是不熟悉也不要紧]    

  1. Example

    1. 表单 form -form

    2. 导航栏/选项卡 element --->nav/tab

    3. 数据表格 table--->table

    4. 弹窗 layer

posted on 2020-06-16 16:29  传奇老中医  阅读(379)  评论(0)  编辑  收藏  举报