layui+tp5.0.24启用和停用按钮怎么做
时间: 2024-01-14 19:02:55 浏览: 90
一个按钮启停的编法
在layui+tp5.0.24中,可以通过以下步骤实现启用和停用按钮:
1. 在HTML页面中添加一个按钮,比如:
```html
<button class="layui-btn layui-btn-primary" id="button">启用</button>
```
2. 在JavaScript中监听按钮点击事件,并根据需要修改按钮状态,比如:
```javascript
<script>
layui.use('layer', function(){
var layer = layui.layer;
$('#button').on('click', function(){
var status = $(this).text(); // 获取当前按钮状态
if(status === '启用'){
$(this).text('停用'); // 修改按钮文本
$(this).removeClass('layui-btn-primary'); // 移除按钮的原始样式
$(this).addClass('layui-btn-danger'); // 添加新的样式
layer.msg('已启用'); // 显示提示信息
} else {
$(this).text('启用'); // 修改按钮文本
$(this).removeClass('layui-btn-danger'); // 移除按钮的原始样式
$(this).addClass('layui-btn-primary'); // 添加新的样式
layer.msg('已停用'); // 显示提示信息
}
});
});
</script>
```
在这段代码中,我们使用了Layui的弹窗组件来显示提示信息,并通过修改按钮的文本和样式来改变按钮的状态。在实际项目中,你可以根据需求修改这段代码,比如将按钮状态保存到数据库中,或者通过Ajax请求来更新页面上的数据等。
阅读全文