【前端】layui前端框架学习笔记

Posted on by hackdl

【前端目录贴】
参考视频:LayUI
参考笔记:https://blog.csdn.net/qq_61313896/category_12432291.html

1.介绍

官网：http://layui.apixx.net/index.html

国人16年开发的框架,拿来即用,门槛低
…

2. LayUi的安装及使用

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来，常用来当做后台管理系统的框架

2.1 LayUi的特点

  1. 原生态开发
  2. 轻量级模块化
  3. 外简内丰
  4. 开箱即用

2.2 安装和使用

官网下载,本地引入核心css和核心js
测试html如下

DOCTYPE html>
html>
head>
    meta charset="utf-8">
    meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    title>开始使用 layuititle>
    link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    script src="./layui-v2.6.8/layui/layui.js">script>
head>
body>

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

        layer.msg('Hello World');
    });
script>
body>
html>

3. 页面元素

3.1 布局

3.1.1 布局容器

3.1.1.1 固定宽度
 
div  class="layui-container" style="background-color:navajowhite;height: 300px">
    固定宽度
div>
3.1.1.2 完整宽度

div class="layui-fluid" style="background-color:yellow;height: 300px">
   完整宽度
div>

3.1.2 栅格系统

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

3.1.2.1 栅格布局规则：

3.1.2.2 响应式规则

栅格会根据屏幕的分辨率选择对应的样式效果

3.1.2.3 列间距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
layui-col-space32
p>即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔p>
如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解
3.1.2.4 列偏移

对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 – 12。

3.1.2.5 列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>布局容器title>
    
    link rel="stylesheet"  href="./layui/css/layui.css">

head>
body>

div class="layui-container">

    
    div class="layui-row" >
        
        div class="layui-col-md5" style="background-color: yellow">
            内容5/12
        div>
        div class="layui-col-md7" style="background-color: #00f7de">
            内容7/12
        div>
    div>
    
    div class="layui-row" >
        
        div class="layui-col-md4" style="background-color:rebeccapurple">
            内容4/12
        div>
        div class="layui-col-md4" style="background-color: red">
            内容4/12
        div>
        div class="layui-col-md5" style="background-color: blue">
            内容5/12
        div>
    div>

    hr/>

    div class="layui-row">
        div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12div>
        div>
        div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12div>
        div>
        div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12div>
        div>
        div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12div>
        div>
        div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12div>
        div>
    div>

    hr>
    h3>列间距h3>
    div class="layui-row layui-col-space30">
        div class="layui-col-md4" >
            div style="background-color: blue">1/3div>
        div>
        div class="layui-col-md4" >
            div style="background-color: blue">1/3div>
        div>
        div class="layui-col-md4" >
            div style="background-color: purple">1/3div>
        div>
    div>

    h3>列偏移h3>
    div class="layui-row">
        div class="layui-col-md4" >
            div style="background-color: blue">4/12div>
        div>
        div class="layui-col-md4 layui-col-md-offset3" >
            div style="background-color: red">4/12div>
        div>
    div>

    hr>
    h3>列嵌套h3>
    div class="layui-row">
        div class="layui-col-md6" style="background-color: red">
            div class="layui-row" >
                
                div class="layui-col-md4" style="background-color:rebeccapurple">
                    内容4/12
                div>
                div class="layui-col-md4" style="background-color: red">
                    内容4/12
                div>
                div class="layui-col-md4" style="background-color: blue">
                    内容5/12
                div>
            div>
        div>
    div>
div>
body>
html>

3.2 基本元素

3.2.1 按钮

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

3.2.1.1 主题

名称 组合
原始 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.2.1.2 尺寸

尺寸 组合
大型 class=“layui-btn layui-btn-lg”
默认 class=“layui-btn”
小型 class=“layui-btn layui-btn-sm”
迷你 class=“layui-btn layui-btn-xs”
3.2.1.3 圆角

主题 组合
原始 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.2.1.4 图标

温馨提示：各种图标字体请移步(**官网**)文档左侧【页面元素 - 图标】阅览

button type="button" class="layui-btn">
  i class="layui-icon layui-icon-down layui-font-12">/i> 按钮
/button>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>布局容器title>
    
    link rel="stylesheet" href="./layui/css/layui.css">

head>
body>

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

hr/>

div>
    button type="button" class="layui-btn layui-btn-primary">原始按钮button>
    button type="button" class="layui-btn">默认按钮button>
    button type="button" class="layui-btn layui-btn-normal">百搭按钮button>
    button type="button" class="layui-btn layui-btn-warm">暖色按钮button>
    button type="button" class="layui-btn layui-btn-danger">警告按钮button>
    button type="button" class="layui-btn layui-btn-disabled">禁用按钮button>
div>

hr/>

div>
    div class="layui-btn-container">
        button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮button>
        button type="button" class="layui-btn layui-btn-primary">默认按钮button>
        button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮button>
        button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮button>
    div>
div>

hr/>

div class="layui-btn-container">
    button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮button>
    button type="button" class="layui-btn layui-btn-radius">默认按钮button>
    button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮button>
    button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮button>
    button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮button>
    button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮button>
div>
hr/>


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

i class="layui-icon">i>

button type="button" class="layui-btn">
    i class="layui-icon layui-icon-face-smile">i>按钮
button>
body>
html>

3.2.2 导航

导航一般指页面引导性频道集合,多以菜单的形式呈现,可用于头部和侧边,面包屑结构简单,支持自定义分隔符
依赖加载模块: element

  • 实现步骤
  1. 引入资源
link rel="stylesheet" href="layui/css/layui.css">
script src="layui/layui.js">/script>
  1. 依赖加载模块
script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
/script>
3.2.2.1 水平导航

水平导航: layui-nav
当前被选中项: layui-this
二级菜单: layui-nav-child

3.2.2.2 垂直/侧边导航

垂直导航: layui-nav layui-nav-tree
侧边导航: layui-nav layui-nav-tree layui-nav-side

3.2.2.3 导航主题

颜色:layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
徽章:

3.2.2.4 面包屑

面包屑导航: layui-breadcrumb
自定义分隔符: lay-separator="-" 

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>布局容器title>
    
    link rel="stylesheet" href="./layui/css/layui.css">
    script src="layui/layui.js">script>

head>
body>
script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
script>








<!--        
 <!– 二级菜单 –>-->
















<!--        
 <!– 二级菜单 –>-->














<!--        
 <!– 二级菜单 –>-->















<!--        
 <!– 二级菜单 –>-->









h3>面包屑导航h3>
span class="layui-breadcrumb" lay-separator="-">
  a href="">首页a>
  a href="">国际新闻a>
  a href="">亚太地区a>
  a>cite>正文cite>a>
ul>
span>
body>
html>

3.2.3 选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 – 常用元素操作）

  • 实现步骤
  1. 引入资源
link rel="stylesheet" href="layui/css/layui.css">
script src="layui/layui.js">/script>
  1. 依赖加载模块
script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
/script>
3.2.3.1 默认Tab选项卡

默认Tab选项卡: layui-tab
选项卡内容: layui-tab-content

3.2.3.2 Tab简洁风格

Tab简洁风格: layui-tab layui-tab-brief

3.2.3.3 Tab卡片风格

Tab卡片风格: layui-tab layui-tab-card

3.2.3.4 带删除的Tab

以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

3.2.4 表格

3.2.4.1 静态表格

layui-table

3.2.4.2 基础属性

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>布局容器title>
    
    link rel="stylesheet" href="./layui/css/layui.css">

head>
body>

table class="layui-table" >
    colgroup>
        col width="150">
        col width="200">
        col>
    colgroup>
    thead>
    tr>
        th>昵称th>
        th>加入时间th>
        th>签名th>
    tr>
    thead>
    tbody>
    tr>
        td>贤心td>
        td>2016-11-29td>
        td>人生就像是一场修行td>
    tr>
    tr>
        td>许闲心td>
        td>2016-11-28td>
        td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
    tr>
    tbody>
table>


table class="layui-table" lay-even lay-skin="line" lay-size="sm">


    colgroup>服务器托管
        col width="150">
        col width="200">
        col>
    colgroup>
    thead>
    tr>
        th>昵称th>
        th>加入时间th>
        th>签名th>
    tr>
    thead>
    tbody>
    tr>
        td>贤心td>
        td>2016-11-29td>
        td>人生就像是一场修行td>
    tr>
    tr>
        td>许闲心td>
        td>2016-11-28td>
        td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
    tr>
    tr>
        td>贤心td>
        td>2016-11-29td>
        td>人生就像是一场修行td>
    tr>
    tr>
        td>许闲心td>
        td>2016-11-28td>
        td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
    tr>
    tr>
        td>贤心td>
        td>2016-11-29td>
        td>人生就像是一场修行td>
    tr>
    tr>
        td>许闲心td>
        td>2016-11-28td>
        td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
    tr>
    tbody>
table>
body>
html>

3.2.5 表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

layui-form

3.2.5.1 基本结构
div class="layui-form-item">
  label class="layui-form-label">标签区域label>
  div class="layui-input-block">
    原始表单元素区域
  div>
div>

常用属性
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
layui-input-block 占据整行宽度
layui-input-inline 不会占据部分宽度

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

autocomplete是否自动填充（当浏览器缓存中存在相同的name属性时，会填充）
placeholder 为空时,默认显示的文本信息
class="layui-input"：layui.css提供的通用CSS类

3.2.5.3 下拉选择框

optgroup 标签给select分组
通过selected属性设置默认选中项
disabled禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)
lay-search 来开启搜索匹配功能

 
    
    div class="layui-form-item">
        label class="layui-form-label">我是下拉选择框label>
        div class="layui-input-inline">
            
            
            
            select name="city" lay-verify="required">
                option value="">请选择一个城市option>
                option value="010" selected>北京option>
                option value="021">上海option>
                option value="0571" disabled>杭州option>
            select>

            select name="quiz" lay-verify="required">
                option value="">请选择option>
                optgroup label="城市记忆">
                    option value="你工作的第一个城市" selected>你工作的第一个城市？option>
                optgroup>
                optgroup label="学生时代">
                    option value="你的工号">你的工号？option>
                    option value="你最喜欢的老师">你最喜欢的老师？option>
                optgroup>
            select>
            select name="city" lay-search>
                option value="">请选择一个城市option>
                option value="010">你好啊北京,hellooption>
                option value="021" selected>上海option>
                option value="0571" disabled>杭州option>
            select>
        div>
    div>

3.2.5.3 复选框

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

  div class="layui-form-item">
        label class="layui-form-label">标签区域22label>
        div class="layui-input-block">
            
            input type="checkbox" name="hobby" title="写作" checked>
            input type="checkbox" name="hobby" title="发呆">
            input type="checkbox" name="hobby" title="禁用" disabled>
            
            hr/>
            input type="checkbox" name="hobby" title="写作" lay-skin="primary" checked>
            input type="checkbox" name="hobby" title="发呆" lay-skin="primary">
            input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled>
        div>
    div>
3.2.5.5 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值，否则选中时返回的就是默认的on


    div class="layui-form-item">
        label class="layui-form-label">标签区域22label>
        div class="layui-input-block">
            
            input type="checkbox" name="xxx" lay-skin="switch" lay-text="开/关闭">
            input type="checkbox" name="yyy" lay-skin="switch" checked disabled>
            input type="checkbox" name="zzz" lay-skin="switch" value="1">
        div>
    div>
3.2.5.6 单选框

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


    div class="layui-form-item">
        label class="layui-form-label">标签区域22label>
        div class="layui-input-block">
            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>
        div>
    div>
3.2.5.7 文本域

class="layui-textarea"：layui.css提供的通用CSS类

 
    div class="layui-form-item">
        label class="layui-form-label">标签区域22label>
        div class="layui-input-block">
            textarea name="aaa" required lay-verify="required" placeholder="请输入" class="layui-textarea">textarea>
        div>
    div>
3.2.5.8 组装行内表单

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内


    div class="layui-form-item">
        div class="layui-inline">
            label class="layui-form-label">范围label>
            div class="layui-input-inline" style="width: 100px;">
                input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            div>
            div class="layui-form-mid">-div>
            div class="layui-input-inline" style="width: 100px;">
                input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            div>
        div>
        div class="layui-inline">
            label class="layui-form-label">密码label>
            div class="layui-input-inline" style="width: 100px;">
                input type="password" name="" autocomplete="off" class="layui-input">
            div>
        div>
    div>
3.2.5.9 忽略美化渲染

对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

 
    div class="layui-form-item">
        label class="layui-form-label">密码label>
        div class="layui-input-block"  >
            select name="city" lay-search lay-ignore>
                option value="">请选择一个城市option>
                option value="010">你好啊北京,hellooption>
                option value="021" selected>上海option>
                option value="0571" disabled>杭州option>
            select>
        div>
    div>
3.2.5.10 表单方框风格

追加 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>

3.3 组件示例

3.3.1 弹层组

3.3.1.1 作为独立组件使用(未下载到独立版本)

引入jQuery1.8以上的任意版本，
引入layer.js
引入layer.css

script>
layer.msg('hello'); 
script>
3.3.1.2 layui 模块化使用

引入layui.css
引入layui.js

layui.use('form', function () {
        var layer = layui.layer;
        layer.msg('hello');
    });
3.3.1.3 内置方法

layer.open
layer.msg

3.3.1.4 type-基本层类型

类型：Number，默认：0
layer提供了5种层类型。可传入的值有：
0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

3.3.1.5 title-标题

类型：String/Array/Boolean，默认：‘信息’
title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
总结:
title :'我是标题'
title: ['文本', 'font-size:18px;']
title: false

3.3.1.6 content-内容

类型：String/DOM/Array，默认：‘’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
3.3.1.7 area – 宽高

类型：String/Array，默认：‘auto’
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

3.3.1.8 icon – 图标

信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

3.3.2 日期与时间选择

3.3.2.1 作为独立组件使用(未下载到独立版本)
3.3.2.2 在 layui 模块中使用
 layui.use('form', function () {
        var laydate = layui.laydate;

    });
3.3.1.4 基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

 laydate.render({
            elem: '#test1' //指定元素
});
3.3.1.5 elem – 绑定元素

类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
3.3.1.6 type – 控件选择类型

类型：String，默认值：date
用于单独提供不同的选择器类型

type可选值 名称 用途
year 年选择器 只提供年列表选
month 年月选择器 只提供年、月选择
date 日期选择器 可选择：年、月、日。type默认值，一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择：年、月、日、时、分、秒 
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true
});
 
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true
});
 
//年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true
});
 
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true
});
3.3.1.7 format – 自定义格式

类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下

格式符 说明
yyyy 年份，至少四位数。如果不足四位，则前面补零
y 年份，不限制位数，即不管年份多少位，前面均不补零
MM 月份，至少两位数。如果不足两位，则前面补零。
M 月份，允许一位数。
dd 日期，至少两位数。如果不足两位，则前面补零。
d 日期，允许一位数。
HH 小时，至少两位数。如果不足两位，则前面补零。
H 小时，允许一位数。
mm 分钟，至少两位数。如果不足两位，则前面补零。
m 秒数，至少两位数。如果不足两位，则前面补零。
s 秒数，允许一位数。 
laydate.render({
            elem: '#test6'
            , format: 'yyyy年MM月dd日' //可任意组合
});
3.3.1.8 value – 初始值

类型：String，默认值：new Date()
支持传入符合format参数设定的日期格式字符，或者 new Date()

//传入符合format格式的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});
 
//传入Date对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

3.3.3 分页

模块加载名称：laypage

3.3.3.1 基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项

div id="test1">/div>
script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('form', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 60 //数据总数，从服务端得到
            , limit: 5 //dize大小   默认一页10条

            , limits: [10, 20, 30, 40, 50] //每页条数的选择项,和layout中的limit搭配使用
            // ,layout:['prev', 'page', 'next','limit']
            , layout: ['prev', 'page', 'next', 'limit', 'count']//自定义排版
            , groups: 6,

            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    console.log('首次不执行执行')
                }
            }

        });

    });
/script>
3.3.3.2 jump – 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    
    //首次不执行
    if(!first){
      //do something
    }
  }
});

3.3.4 数据表格

模块加载名称：table

3.3.4.1 快速使用
table id="demo" lay-filter="test">/table>
script>
    layui.use('form', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'singers.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名称', width: 150}
                , {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}
                , {field: 'other_name', title: '别称', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });

    });
/script>

js数据格式

{
  "code": 0,
  "msg": "",
  "count": 50,
  "data": [{
    "singer_name": "周杰伦",
    "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp",
    "other_name": "Jay Chou",
    "singer_id": 4558,
    "id": 1
  },
    {
      "singer_name": "林俊杰",
      "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp",
      "other_name": "JJ Lin",
      "singer_id": 4286,
      "id": 2
    }
  ]
}
3.3.4.2 三种初始化渲染方式

默认方式是方法渲染

3.3.4.3 方法渲染
table id="demo2">table>

 // 方法渲染
        table.render({
            elem: '#demo2'
            , height: 312
            , url: 'singers.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名称', width: 150}
                , {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}
                , {field: 'other_name', title: '别称', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });
3.3.4.4 自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

  1. 带有 class=“layui-table” 的
    标签。

  2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
  3. 在

    4. 标签中设置属性lay-data=""用于配置表头信息

    table id="demo3" class="layui-table" lay-data="{height:315, url:'singers.json' ,page:true}">
    thead>
    tr>
        th lay-data="{field:'id', width:80, sort: true}">IDth>
        th lay-data="{field:'singer_name', width:80, sort: true}">歌手名称th>
        th lay-data="{field:'singer_pic', width:80, sort: true}">歌手图片th>
        th lay-data="{field:'other_name', width:80, sort: true}">别称th>
        th lay-data="{field:'singer_id', width:80, sort: true}">歌手idth>
    tr>
    thead>
table>
    3.3.4.5 转换静态表格

    页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素

    table lay-filter="demo4">
    thead>
    tr>
        th lay-data="{field:'username', width:100}">昵称th>
        th lay-data="{field:'experience', width:80, sort:true}">积分th>
        th lay-data="{field:'sign'}">签名th>
    tr>
    thead>
    tbody>
    tr>
        td>贤心1td>
        td>66td>
        td>人生就像是一场修行atd>
    tr>
    tr>
        td>贤心2td>
        td>88td>
        td>人生就像是一场修行btd>
    tr>
    tr>
        td>贤心3td>
        td>33td>
        td>人生就像是一场修行ctd>
    tr>
    tbody>
table>

    //转换静态表格
        table.init('demo4', {
            height: 315 //设置高度
            ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
});
    3.3.4.6 基础参数使用的场景

    基础参数使用场景

    场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: '/api/data'
});
       
场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… /table>
 
更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

    参考:http://layui.apixx.net/doc/modules/table.html#option

    3.3.4.7 开启分页

    page: true //开启分页

    3.3.4.8 开启头部工具栏&行工具栏
    !--表格工具栏-->
script type="text/html" id="toolbarDemo">
    div class="layui-btn-container">
        button class="layui-btn layui-btn-sm" lay-event="addAll">添加/button>
        button class="layui-btn layui-btn-sm" lay-event="deleteAll">删除/button>
        button class="layui-btn layui-btn-sm" lay-event="updateAll">编辑/button>
    /div>
/script>
!--表头工具栏-->
script type="text/html" id="barDemo">
    a class="layui-btn layui-btn-xs" lay-even="edit">编辑/a>
    a class="layui-btn layui-btn-xs" lay-even="delete">删除/a>
/script>

    绑定表格工具栏：toolbar:'#toolbarDemo'
    绑定表头工具栏： {toolbar: '#barDemo'}

    3.3.4.9 事件监听
    • 头工具事件
    //test 为容器的lay-filter=""属性值
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
    • 行工具事件
    table.on('tool(test)', function (obj) {
            console.log(1)
            // var checkStatus = table.checkStatus(obj.config.id);
            //获取当前事件名
            var tr = obj.data;//当前行数据
            var event = obj.event;
            console.log(event)
            switch (obj.event) {
                case 'delete':
                    layer.confirm('确认要删除吗?', function (index) {
                        //删除指定tr
                        obj.del();删除对应行（tr）的DOM结构，并更新缓存
                        console.log('删除了')
                        //关闭弹出层,(index是当前弹出层的下标)
                        layer.close(index);
                        //...//向服务端发送删除指令
                    });
                    break;
                case 'edit':
                    layer.prompt({
                        //表单元素的类型 0=文本框, 1=密码框, 2=文本域
                        formType: 0,
                        value: tr.singer_name //设置输入框的值
                    }, function (value, index) {
                        //修改指定单元格的值
                        //value表示修改后输入的值
                        obj.update({
                            singer_name:value
                        })
                        layer.close(index);
                    });
                    break;
            }
        });
    3.3.4.10 开启单元格编辑

    单元格编辑类型（默认不开启）目前只支持：text（输入框）
    {field: 'singer_name', title: '歌手名称', width: 150,edit:'text'}

    • 监听单元格编辑事件
    //监听单元格编辑事件
        table.on('edit(test)', function (obj) {
            console.log(obj)
            //修改后得值
            var value=obj.value;
            //得到当前修改的tr对象
            var data=obj.data;
            //得到修改后的字段
            var field  = obj.field;
            layer.alert('id:'+data.id+'的'+field+'字段值修改为:'+value);

        });
    3.3.4.11 数据表格的重载

    3.3.5 LayUIMini

    基于Layui编写的一套最简洁、易用的后台框架模板
    官网地址:http://layuimini.99php.cn/

    3.3.5.1 LayUIMini使用

    …

    $(function() {
    setTimeout(function () {
    var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
    if (mathcodeList.length > 0) {
    for (let i = 0; i < mathcodeList.length; i++) {
    if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
    var alt = mathcodeList[i].alt;
    alt = '\(' + alt + '\)';
    var curSpan = $('');
    curSpan.text(alt);
    $(mathcodeList[i]).before(curSpan);
    $(mathcodeList[i]).remove();
    }
    }
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    }
    }, 1000)
    });


    优惠劵




    骑鱼过海的猫123

    关注
    关注





    • 8

      点赞



    • 踩





    • 10


      收藏

      觉得还不错?

      一键收藏




    • 0

      评论

    前端layui写的日历模板.zip

    05-05

    前端layui写的日历模板

    前端layui带进度的答题效果

    10-14

    一个使用layui制作的单选小功能，带进度条和弹窗结果文本提示。可用于答题功能页面。

    参与评论
    您还未登录，请先
    登录
    后发表或查看评论

    酒店管理系统练手项目-包含前端layui、后端servlet

    09-19

    酒店管理系统练手项目--包含前端layui、后端servlet

    前端 layui-fromSelects 下拉框多选,搜索

    03-30

    前端select下拉框带搜索,多选,反选

    建筑材料租赁系统源码+项目说明（后端SSM，前端LayUI，Web服务器Tomcat源码+项目说明zip

    01-31

    【资源说明】
    1、该资源包括项目的全部源码，下载可以直接使用！
    2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。
    3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。

    建筑材料租赁系统源码+项目说明（后端SSM，前端LayUI，数据库MySQL，开发工具IDEA，Web服务器Tomcat源码+项目说明（客户管理，材料管理，订单管理，修改密码）.zip

    前端后台框架Layui学习笔记 - 数据表格分页处理

    Marinda_Speed的博客
    12-11

    903

    前端后台框架Layui学习笔记 - 数据表格分页处理

    LayUI（前端框架之一）学习笔记

    qq_44788518的博客
    03-30

    963

    视频出处 爱代码的念小安
    layui官网
    1.主要内容

    2.LayUl的安装及使用
    2.1.LayUl的介绍
    layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架，遵循原生HTMLCSSI)S的书写与组织形式，门槛极低，拿来即用。
    由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大

    Layui学习笔记

    布懂同学开始提问题
    11-11

    413

    layui官网： https://www.layui.com/
    关于如何下载：配置之类的见：点击这里
    然后就是学习视频了：推荐使用 小破站（哔哩哔哩）
    想要找学习视频，先在这上面看看，毕竟没广告还免费，
    虽然点开后你能看到很多学习视频，但是建议看雷哥的
    理由：简洁，无打广告，没任何废话

    接下来就是学习笔记了：
    按钮：

    选项卡：

    进度条：

    自己的使用查看手册，有一块学习的共同加油。
    联系Q：...

    前端后台框架Layui学习笔记 - 数据表格基于SpringBoot&Mybatis-Plus进行搜索处理

    Marinda_Speed的博客
    12-23

    426

    前端后台框架Layui学习笔记 - 数据表格基于SpringBoot&Mybatis-Plus进行搜索处理

    l前端框架ayui笔记

    03-25

    3. 引入基本的 layui 包括一个 css 和一个 js 文件； 4 4. 还有一个 layui.all.js(271k，全模块)，包含了所有模块，不需要加载模块； 5 二、 使用方法 5 三、 图标 6 方法1 使用字符实体 6 相关样式 6 方法2 使用...

    【学习笔记】前端框架LayUI.pdf

    09-13

    【学习笔记】前端框架LayUI.pdf

    javaweb 前端 html学习笔记

    04-26

    javaweb 前端 html学习笔记

    前端工程师学习笔记 超级详细

    10-31

    正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...

    前端学习笔记（不断更新中）

    01-08

    _parent：在父框架中打开被链接文档 3.input标签中的require：将文本输入框设置为必填项 4.input标签的radio属性（单选按钮） indoor outdoor 男 女 5.label的for属性 Email: # 自动将焦点移动到绑定的元素...

    【 Vue 】Diff 算法上

    weixin_42132860的博客
    03-27

    1175

    上一章我们讨论了渲染器是如何更新各种类型的VNode的，实际上，上一章所讲解的内容归属于完整的Diff算法之内，但并不包含核心的Diff算法。那什么才是核心的Diff算法呢？看下图：我们曾在上一章中讲解子节点更新的时候见到过这张图，当时我们提到只有当新旧子节点的类型都是多个子节点时，核心Diff为了便于表述，我们把这个算法称为：简单Diff算法。简单Diff算法虽然能够达到目的，但并非最佳处理方式。我们经常会遇到可排序的列表，假设我们有一个由li列表中的li标签是ul。

    如何利用webpack来优化前端性能

    m0_56551554的博客
    03-28

    587

    通过以上优化策略和技巧，结合合理的配置和使用 Webpack，开发人员可以显著提升前端应用程序的性能，改善用户体验，同时也为自己的技术水平增加新的成长点。通过合理配置 Webpack 的 mode 选项为 production，启用 Tree Shaking 功能，可以更好地优化前端性能，减少冗余代码的加载。利用 Webpack 的动态 import() 或 React.lazy/Suspense 等技术，可以实现组件级别的懒加载，避免一次性加载过多资源，优化用户体验和页面性能。

    （执行上下文作用域链）前端八股文修炼Day4

    每天积累一点点
    03-26

    1051

    开始时给出一个简单而清晰的定义，例如：“作用域是指变量和函数的可访问性范围，而作用域链是用来解析变量位置的机制”。

    前端代码规范
    最新发布

    liangshanbo1215的博客
    03-30

    300

    1、京东凹凸实验室前端代码规范：2、腾讯前端代码规范：3、腾讯前端代码规范手册：4、百度前端代码规范：5、JavaScript Standard Style：6、Vue 代码风格指南：

    前端学习笔记 javascript

    08-31

    对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。

    1. HTML基础：
    - 了解HTML的基本结构和标签
    - 学习如何创建和组织网页内容
    - 掌握常用的HTML标签，如标题、段落、链接、图像等

    2. CSS样式：
    - 学习如何使用CSS来为网页添加样式
    - 掌握CSS选择器和属性
    - 学习如何设置文字样式、颜色、背景、布局等

    3. JavaScript基础：
    - 理解JavaScript的基本概念和语法
    - 学习如何操作DOM元素，实现网页交互
    - 掌握常用的JavaScript函数和事件处理

    4. 响应式设计：
    - 学习如何使用媒体查询和弹性布局创建响应式网页
    - 掌握移动优先设计和流体网格布局

    5. 前端框架和工具：
    - 了解流行的前端框架，如React、Angular、Vue等
    - 学习使用前端构建工具，如Webpack、Gulp等
    - 掌握前端调试工具和浏览器开发者工具的使用

    这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。

    “相关推荐”对你有帮助么？


    • 非常没帮助

    • 没帮助

    • 一般

    • 有帮助

    • 非常有帮助

    提交

    window.csdn.csdnFooter.options = {
    el: '.blog-footer-bottom',
    type: 2
    }

    40
    原创
    20万+
    周排名
    4万+
    总排名
    1万+
    访问

    等级
    620
    积分
    168
    粉丝
    228
    获赞
    2
    评论
    210
    收藏

    私信
    关注

    热门文章

    • 【后端】正则表达式&java正则学习笔记

      1032

    • 【后端】java压缩图片

      949

    • 【大数据】kafka

      917

    • 【awk】学习笔记

      853

    • 尚硅谷Vue_basic

      834

    最新评论

    • 04-尚硅谷Vue_Vue中的ajax

      CSDN-Ada助手:
      Vue入门 技能树或许可以帮到你：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue

    • 尚硅谷Vue_basic

      CSDN-Ada助手:
      非常感谢你分享这么有价值的笔记，希望你能够继续写下去，让更多人受益。除了你提到的内容，Vue框架还有很多其他的指令和生命周期钩子函数，可以帮助我们更好地掌握Vue的使用。此外，Vue还有一些高级特性，比如组件、路由、状态管理等，也是非常值得深入学习的。希望你能够不断拓展自己的知识和技能，继续努力！

      如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2

    • 【AJAX】笔记

      CSDN-Ada助手:
      恭喜你这篇博客进入【CSDN每天最佳新人】榜单，全部的排名请看 https://bbs.csdn.net/topics/614083590。

    最新文章

    • 测试sadsad
    • 【前端】bootstrap前端框架学习笔记
    • 【前端】尚硅谷Promise
    2024年19篇
    2023年21篇

    (adsbygoogle = window.adsbygoogle || []).push({});

    目录

    $("a.flexible-btn").click(function(){
    $(this).parents('div.aside-box').removeClass('flexible-box');
    $(this).parents("p.text-center").remove();
    })

    目录

    .wwads-img img {width: 150px; margin-top:10px}

    最新文章

    • 测试sadsad
    • 【前端】bootstrap前端框架学习笔记
    • 【前端】尚硅谷Promise
    2024年19篇
    2023年21篇

    目录

    var timert = setInterval(function() {
    sideToolbar = $(".csdn-side-toolbar");
    if (sideToolbar.length > 0) {
    sideToolbar.css('cssText', 'bottom:64px !important;')
    clearInterval(timert);
    }
    }, 200);

    评论
    被折叠的条评论
    为什么被折叠?

    到【灌水乐园】发言

    查看更多评论

    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元
    前往充值 >

    需支付：10.00元




    成就一亿技术人!

    领取后你会自动成为博主和红包主的粉丝
    规则

    hope_wisdom

    发出的红包

    实付元
    使用余额支付

    点击重新获取

    扫码支付

    钱包余额
    0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: