layuiu按鈕

1.關於layui圖標 唯一要提的是這是一個矢量圖標 因此可以像對待文字一樣加上style = font-size  以及color屬性

eg： <i class="layui-icon" style="font-size:200px;color:red">&#xe60c;</i>

引入css和js文件就ok。

動畫效果也很簡單不多寫了。

2.按鈕:

***向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。

首先測試一下向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕這個。

沒有問題。

eg:

<h1 class="layui-btn">h1</h1>
<p class="layui-btn">p</p>
<i class="layui-btn">i</i>
<ul class="layui-btn">
<li>ul</li>
</ul>
<input class="layui-btn" type="text" name="name" value="測試按鈕（文本）" />

全都被渲染成了按鈕。

layui對於button來說是相當寬容的了。正常使用話我覺得還是input吧。這樣應該 便於操控。看一下input type=button.效果很ok。

***這里需要注意一點，類layui-btn-disabled可以直接將button禁用也就是說當需要js控制 按鈕的可選狀態時候，只需要像下面：

eg:

<input type="button" class="layui-btn" name="btnChangeDis" id="btnDis" value="可選/不可選" />

<script>
$(function () {
$("#btnDis").click(function () {
$('#btntest').addClass("layui-btn-disabled")
});
});
</script>

輕松改變狀態。

 

***按鈕還可以和圖標結合使用。也很簡單

eg:

<button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>