关于layui的按钮禁用与恢复方式

更新时间：2022年06月28日 14:21:10 作者：西楚三少

这篇文章主要介绍了关于layui的按钮禁用与恢复方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

layui的按钮禁用与恢复

禁用按钮状态

$('#sendSmsBtn').addClass("layui-btn-disabled").attr("disabled",true);

恢复按钮状态

$('#sendSmsBtn').removeClass("layui-btn-disabled").attr("disabled",false);

注意：如果只是让按钮变成灰色按钮仍然可以点击

$('#sendSmsBtn').addClass("layui-btn-disabled");

layui中基本元素之按钮

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

按钮

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

用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本元素</title>
    <!-- 引入LayUId的核心CSS-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <div class="layui-btn">一个按钮</div>
</body>
</html>

主题

尺寸

圆角

图标

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

按钮组

将按钮放入一个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">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

按钮容器

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

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

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

深入理解JS中attribute和property的区别
property 和 attribute非常容易混淆，但实际上，二者是不同的东西，属于不同的范畴，本文就详细的介绍一下JS中attribute和property的区别，感兴趣的可以了解一下
2022-02-02
前端小程序实现预览pdf并导出完整代码
这篇文章主要介绍了小程序中无法直接导出PDF或文档的解决方案,通过调用API下载文件并打开,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2025-01-01
基于Asp.net与Javascript控制的日期控件
使用Asp.net+Javascript控制的日期控件，需要的朋友可以参考下。
2010-05-05
js 屏蔽鼠标右键脚本附破解方法
用来屏蔽鼠标右键的代码，破解方法也比较简单。比较根本。禁掉js什么也运行不了。
2009-12-12
Webpack4+Babel7+ES6兼容IE8的实现
这篇文章主要介绍了Webpack4+Babel7+ES6兼容IE8的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
javascript跨域总结之window.name实现的跨域数据传输
本文给大家介绍window.name实现的跨域数据传输，自己亲自实践了一下，真的非常好用，特此分享到脚本之家网站供大家参考
2015-11-11
微信小程序自定义弹窗实现详解(可通用）
这篇文章主要介绍了微信小程序自定义弹窗实现详解(可通用）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
layui table 参数设置方法
今天小编就为大家分享一篇layui table 参数设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
For循环中分号隔开的3部分的执行顺序探讨
这篇文章主要探讨了For循环中分号隔开的3部分的执行顺序,需要的朋友可以参考下
2014-05-05
Javascript中classList的基本使用方法
classList 是一个非常实用的工具,可以让我们轻松地操作元素的类名,在使用 classList 时,我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名,接下来我们详细学习一下classList的使用方法以及相关方法,感兴趣的朋友一起看看吧
2023-10-10