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  传奇老中医  阅读(79)  评论(0编辑  收藏

统计