百度传课 amazeUI 按钮交互作业

最新推荐文章于 2021-06-16 04:25:30 发布

mika85489

最新推荐文章于 2021-06-16 04:25:30 发布

阅读量704

点赞数

分类专栏： web开发文章标签： amazeUI

本文链接：https://blog.csdn.net/mika85489/article/details/52475466

版权

web开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

摘要：在传课上看的视频教程，作业的代码写在这里，欢迎大家拍砖。

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>amazeUI测试用</title>
    <link rel="stylesheet" href="../assets/css/amazeui.css">
</head>
<body>
<div class="am-container">
    <br>
    <button type="button" class="am-btn am-radius am-btn-default zt-btn-config" style="outline:none;">删除</button>
    <br><br>
    <button type="button" class="am-btn am-round am-btn-warning zt-btn-config" style="outline:none;">删除</button>
    <br><br>
    <button type="button" class="am-btn am-radius am-btn-default zt-btn-config" style="outline:none;">删除</button>
</div>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/amazeui.js"></script>
<script>
    $(".zt-btn-config").click(function(){
        var btn = $(this);
        if(btn.text() == '确认删除'){
            alert("真的删除了");
            btn.removeClass('am-btn-warning');
            btn.addClass('am-btn-default');
            btn.text('删除');
        }else{
            btn.removeClass('am-btn-default');
            btn.addClass('am-btn-warning');
            btn.text('确认删除');
            window.setTimeout(function () {
                btn.removeClass('am-btn-warning');
                btn.addClass('am-btn-default');
                btn.text('删除');
            },3000);
        }
    });
</script>
</body>
</html>