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>