關(guān)于layui的按鈕禁用與恢復(fù)方式
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)也是需要了解一些前端框架的。就目前的來(lái)說(shuō)有大火的VUE，但是VUE還是存在一定的學(xué)習(xí)成本，所以決定先從對(duì)后臺(tái)友好的LayUI開(kāi)始入手先做一些小項(xiàng)目練練手，后面會(huì)考慮使用VUE+ElementUI做一個(gè)大型一點(diǎn)的SAAS系統(tǒng)。查閱資料后得到如下文章，作為學(xué)習(xí)記錄使用。
按鈕
向任意HTML元素設(shè)定class=“layui-btn”，建立一個(gè)基礎(chǔ)按鈕。通過(guò)追加格式為layui-btn-{type}的class來(lái)定義其它按鈕風(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"></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>
按鈕容器
盡管按鈕在同節(jié)點(diǎn)并排時(shí)會(huì)自動(dòng)拉開(kāi)間距，但在按鈕太多的情況，效果并不是很美好。因?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ú)法與你的網(wǎng)站契合，那么請(qǐng)先允許我“噗”一聲。。。然后你就大膽地自擼一個(gè)顏色吧！比如：粉紅色或者菊花色（一個(gè)有味道的顏色）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02
前端小程序?qū)崿F(xiàn)預(yù)覽pdf并導(dǎo)出完整代碼
這篇文章主要介紹了小程序中無(wú)法直接導(dǎo)出PDF或文檔的解決方案,通過(guò)調(diào)用API下載文件并打開(kāi),文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-01-01
使用Asp.net+Javascript控制的日期控件，需要的朋友可以參考下。2010-05-05
用來(lái)屏蔽鼠標(biāo)右鍵的代碼，破解方法也比較簡(jiǎn)單。比較根本。禁掉js什么也運(yùn)行不了。2009-12-12
Webpack4+Babel7+ES6兼容IE8的實(shí)現(xiàn)
這篇文章主要介紹了Webpack4+Babel7+ES6兼容IE8的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript跨域總結(jié)之window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸，自己親自實(shí)踐了一下，真的非常好用，特此分享到腳本之家網(wǎng)站供大家參考2015-11-11
微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用）
這篇文章主要介紹了微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用）,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
今天小編就為大家分享一篇layui table 參數(shù)設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
For循環(huán)中分號(hào)隔開(kāi)的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號(hào)隔開(kāi)的3部分的執(zhí)行順序,需要的朋友可以參考下2014-05-05
classList 是一個(gè)非常實(shí)用的工具,可以讓我們輕松地操作元素的類名,在使用 classList 時(shí),我們可以通過(guò) add、remove、toggle 和 contains 等方法來(lái)添加、刪除、切換和檢查類名,接下來(lái)我們?cè)敿?xì)學(xué)習(xí)一下classList的使用方法以及相關(guān)方法,感興趣的朋友一起看看吧2023-10-10