• 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

  • 相关阅读:
    ELK环境搭建
    django orm 操作表
    django1.11入门
    CentOS7 yum安装python3.6
    完美的【去重留一】SQL
    CentOS7安装docker
    【Jenskins】安装与配置
    【Linux】网卡配置与绑定
    【SaltStack】一些常用模块举例
    【SaltStack】通过Master给Minion安装MySQL
  • 原文地址:https://www.cnblogs.com/xiaoNYH/p/13141681.html
Copyright © 2020-2023  润新知