学习网址：https://www.bilibili.com/video/av59813890?p=3
相关样式
1，必要样式 layui-btn
2，主题样式
|-- layui-btn-primary 原始按钮
|-- layui-btn-normal 百搭按钮
|-- layui-btn-warm 暖色
|-- layui-btn-danger 警告
|-- layui-btn-disabled 禁用
3，大小样式
|-- layui-btn-lg 大型 按钮
|-- layui-btn-sm 小型按钮
|-- layui-btn-xs 微型按钮
4，图标结合
5，圆角样式
layui-btn-radius
6，按钮组
layui-btn-group
事件监听
和jquery的用法一样
代码如下所示
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/1
Time: 19:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
</head>
<body>
<div class="site-title">
<fieldset><legend><a name="theme">主题</a></legend></fieldset>
</div>
<div class="site-text">
<p>
<button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" type="button" class="layui-btn">默认按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</p>
</div>
<div class="site-title">
<fieldset><legend><a name="theme">图标按钮</a></legend></fieldset>
</div>
<p>
<button type="button" type="button" class="layui-btn layui-btn-primary layui-icon layui-icon-cellphone"></button>
<button type="button" type="button" class="layui-btn layui-btn-primary layui-icon layui-icon-cellphone">手机按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-primary ">
<span class="layui-icon"></span>手机按钮
</button>
</p>
<div class="site-title">
<fieldset><legend><a name="theme">圆角按钮</a></legend></fieldset>
</div>
<p>
<button type="button" type="button" class="layui-btn layui-btn-primary layui-icon layui-icon-cellphone layui-btn-radius"></button>
<button type="button" type="button" class="layui-btn layui-btn-primary layui-icon layui-icon-cellphone layui-btn-radius">手机按钮</button>
<button type="button" type="button" class="layui-btn layui-btn-primary layui-btn-radius">
<span class="layui-icon"></span>手机按钮
</button>
</p>
<div class="site-title">
<fieldset><legend><a name="theme">按钮组</a></legend></fieldset>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn" id="add">增加</button>
<button type="button" class="layui-btn" id="update">编辑</button>
<button type="button" class="layui-btn" id="delete">删除</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>
<script>
layui.use(["jquery"],function () {
var $=layui.jquery;
$(".layui-btn").click(function () {
alert($(this).html());
})
//使用id选择器ajax异步上传数据
$("#add").click(function () {
alert("成功添加数据");
});
});
</script>
</body>
</html>
效果如下图所示
2822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
