Question

我在Semantic UI上进行探索，我想更改一个普通按钮，以显示未按预期发生的加载状态。

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>Semantic UI CDN</title>
    <link rel="stylesheet" href="semantic.css" />
    <script src="jquery.min.js"></script>
    <script src="semantic.js"></script>

</head>

<body style="margin:1em;">
    <!-- Your Semantic UI Code -->
    <br/><br/>

    <form class="ui form"  style="">
        <div class="inline fields">
            <div class="three wide field required">
                <label>Name</label>
            </div>
            <div style="width: 290px;">
                <input type="text" >
            </div>
            <!--
            <button style="margin:1em;" class="ui primary button" id="btn_validate">Validate</button>
            -->
            <input type="button" style="margin:1em;" id="btn_validate" class="ui teal button" value="Validate"/>   

        </div>


        <div class="inline fields">
            <div class="three wide field required">
                <label>Place</label>
            </div>
            <div style="width: 290px;">
                <input type="text" >
            </div>
            <!--
            <button style="margin:1em;" class="ui primary button" id="btn_validate">Validate</button>
            -->
             <!--
             I have added this button, just for reference
             -->
            <button  style="margin:1em;"  class="ui teal loading button" id="btn2">Validate</button>

        </div>


    </form>
    <script type="text/javascript">

        $("#btn_validate").click(function(){
            alert('you clicked me');
            //Adding 'loading' class here....
            $(this).addClass("loading");
        }); 


    </script>
</body>

</html>

我做错了什么？

Answer 1

语义UI的Button模块的某些功能要求将子元素添加到按钮的DOM中，这使得使用<input type="button">不适合，因为它不允许它。我建议改用<button>，<a>或<div>。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/>

<h3 class="ui header">Does not work</h3>
<input type="button" class="ui loading button" value="Button" />
<input type="button" class="ui icon button" value="<i class='settings icon'></i>" />

<h3>Does work</h3>
<button type="button" class="ui loading button">Click me</button>
<a class="ui icon button"><i class="settings icon"></i></a>

＆＃13;

语义UI更改普通按钮以显示加载状态

1 个答案: