0
点赞
收藏
分享

微信扫一扫

LayUI-01

梦为马 2023-09-21 阅读 74
icocssCSSjQuery前端开发

LayUI

一、课程目标

1. 【了解】LayUI框架                       
2. 【理解】LayUI基础使用
3. 【掌握】LayUI页面元素
4. 【掌握】LayUI内置模块

二、LayUI基本使用

2.1 概念

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

2.2 下载

2.2.1 官网下载

官网 : https://layuion.com/

官方文档:https://layuion.com/docs/

2.2.2 目录结构

官网下载后，解压文件，目录结构如下

├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件： 

./layui/css/layui.css
./layui/layui.js

2.3 简单实例

LayUI的使用基本分为两个方面：

页面元素：主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用

内置模块：进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写

<!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>

三、LayUI页面元素

layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。

3.1 栅格

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

  1. 采用 layui-row 来定义行，如：<div class="layui-row"></div> 2.采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中： 变量md 代表的是不同屏幕下的标记（可选值见下文） 变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。 3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

3.1.1 示例

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
   
  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

3.2 颜色

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

3.2.1 常用主色

3.2.2 场景色

3.2.3 极简中性色

3.2.4 内置的背景色CSS类

3.3 字体图标

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

3.3.1 使用

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class

例如：

<i class="layui-icon layui-icon-face-smile"></i>

3.3.2 内置图标一览表

更多： https://www.layui.com/doc/element/icon.html

3.4 动画

layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

3.4.1 使用

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如： 

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
 
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

3.4.2 基本动画

3.5 按钮

layUI通过样式设置，可以将任意元素设置为相应的按钮样式

3.5.1 基本使用

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

3.5.2 主题

名称

组合

原始按钮

class="layui-btn layui-btn-primary"

默认按钮

class="layui-btn"

百搭按钮

class="layui-btn layui-btn-normal"

暖色按钮

class="layui-btn layui-btn-warm"

警告按钮

class="layui-btn layui-btn-danger"

禁用按钮

class="layui-btn layui-btn-disabled"

3.5.3 尺寸

尺寸

组合

大型按钮

class="layui-btn layui-btn-lg"

默认按钮

class="layui-btn"

小型按钮

class="layui-btn layui-btn-sm"

迷你按钮

class="layui-btn layui-btn-xs"

可以与主题按钮组合使用

尺寸

组合

大型百搭

class="layui-btn layui-btn-lg layui-btn-normal"

正常暖色

class="layui-btn layui-btn-warm"

小型警告

class="layui-btn layui-btn-sm layui-btn-danger"

迷你禁用

class="layui-btn layui-btn-xs layui-btn-disabled"

也可以根据所在块自适应大小

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

3.5.4 圆角

主题

组合

原始

class="layui-btn layui-btn-radius layui-btn-primary"

默认

class="layui-btn layui-btn-radius"

百搭

class="layui-btn layui-btn-radius layui-btn-normal"

暖色

class="layui-btn layui-btn-radius layui-btn-warm"

警告

class="layui-btn layui-btn-radius layui-btn-danger"

禁用

class="layui-btn layui-btn-radius layui-btn-disabled"

3.5.5 图标按钮

<button type="button" class="layui-btn">
  <i class="layui-icon"></i> 添加
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">ဂ</i>
</button>

3.5.6 按钮组

将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配 

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>

3.5.7 按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器 

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button> 
  <button type="button" class="layui-btn">按钮二</button> 
  <button type="button" class="layui-btn">按钮三</button> 
</div>

3.6 表单

LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块

3.6.1 简单使用

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

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

示例：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</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>

3.6.2 行区块结构

基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 

<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>

3.6.3 输入框

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class="layui-input"：layui.css提供的通用CSS类

3.6.4 下拉选择框

3.6.4.1 默认选择框

<select name="city" lay-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

3.6.4.2 分类选择框

<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

3.6.4.3 搜索选择框

以及通过设定属性 lay-search 来开启搜索匹配功能 

<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
  ……
</select>

属性selected可设定默认项 属性disabled开启禁用，select和option标签都支持

3.6.5 复选框

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 属性checked可设定默认选中 属性lay-skin可设置复选框的风格 设置value="1"可自定义值，否则选中时返回的就是默认的on

3.6.6 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格 

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

属性checked可设定默认开 属性disabled开启禁用 属性lay-text可自定义开关两种状态的文本 设置value="1"可自定义值，否则选中时返回的就是默认的on

3.6.7 单选框 

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

属性title可自定义文本 属性disabled开启禁用 设置value="xxx"可自定义值，否则选中时返回的就是默认的on

3.6.8 文本域 

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

3.6.9 表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格 

<form class="layui-form layui-form-pane" action="">
  内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
  <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

举报

相关推荐

Layui + Flask 使用（01）

layuiflask前端

layui

java

Layui深入

机器学习人工智能笔记jupyter数据分析青少年编程学习

初识Layui

Layui框架笔记前端开发那些事儿开发玄机随录前端

Layui使用

csshtml官网jQuery前端开发

layui入门

layuihtml模块化前端页面云平台云计算

前端 layui

layui前端html编程语言

143 LayUI

layuihtmlcssico虚拟化云计算

layui文档

layui前端javascript

layui使用

layui前端javascript
0 条评论