快捷導(dǎo)航

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

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

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

layui的按鈕禁用與恢復(fù)

禁用按鈕狀態(tài)

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

恢復(fù)按鈕狀態(tài)

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

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

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

layui中基本元素之按鈕

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

按鈕

向任意HTML元素設(shè)定class=“layui-btn”，建立一個(gè)基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風(fēng)格。內(nèi)置的按鈕class可以進(jìn)行任意組合，從而形成更多種按鈕風(fēng)格。

用法

<!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">一個(gè)標(biāo)準(zhǔn)的按鈕</button>
    <a  class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>
    <div class="layui-btn">一個(gè)按鈕</div>
</body>
</html>

主題

尺寸

圓角

圖標(biāo)

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

按鈕組

將按鈕放入一個(gè)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é)點(diǎn)并排時(shí)會(huì)自動(dòng)拉開間距，但在按鈕太多的情況，效果并不是很美好。因?yàn)槟阈枰玫桨粹o容器

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

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

您可能感興趣的文章: