關(guān)于layui的按鈕禁用與恢復方式

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

這篇文章主要介紹了關(guān)于layui的按鈕禁用與恢復方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

layui的按鈕禁用與恢復

禁用按鈕狀態(tài)

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

恢復按鈕狀態(tài)

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

注意：如果只是讓按鈕變成灰色按鈕仍然可以點擊

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

layui中基本元素之按鈕

最近在準備找工作的事項，但是作為一個后臺也是需要了解一些前端框架的。就目前的來說有大火的VUE，但是VUE還是存在一定的學習成本，所以決定先從對后臺友好的LayUI開始入手先做一些小項目練練手，后面會考慮使用VUE+ElementUI做一個大型一點的SAAS系統(tǒng)。查閱資料后得到如下文章，作為學習記錄使用。

按鈕

向任意HTML元素設(shè)定class=“layui-btn”，建立一個基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內(nèi)置的按鈕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  class="layui-btn">一個可跳轉(zhuǎn)的按鈕</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>

按鈕容器

盡管按鈕在同節(jié)點并排時會自動拉開間距，但在按鈕太多的情況，效果并不是很美好。因為你需要用到按鈕容器

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

你是否發(fā)現(xiàn)，主題、尺寸、圖標、圓角的交叉組合，可以形成難以計算的按鈕種類。另外，你可能最關(guān)注的是配色，Layui內(nèi)置的六種主題的按鈕顏色都是業(yè)界常用的標準配色，如果他們?nèi)匀粺o法與你的網(wǎng)站契合，那么請先允許我“噗”一聲。。。然后你就大膽地自擼一個顏色吧！比如：粉紅色或者菊花色（一個有味道的顏色）

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: