javascript - 如何在语义 UI 模式中使用自定义回调

Question

我想在语义 ui 模式中使用 2 个以上的按钮用于反馈目的，如easy,normal和hard. 而且我还需要根据单击的按钮执行操作。

我知道如何使用批准和拒绝按钮（我可以将它用于 2 个按钮）。但是如何用 3 个不同的回调来处理这 3 个按钮。

或任何替代解决方案。

Answer 1

好吧，完美的解决方案是如果可以知道在任何回调中按下了哪个按钮。不幸的是，我找不到这样做的方法。

onApprove: function () {
    console.log(this); // returns the modal
    console.log(arguments); // returns an empty array
}

所以，而不是上面，添加一个事件监听器到你的按钮。这样你就知道要执行哪个回调了。

<button class="show">Open</button>

<div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">Test title</div>
    <div class="content">Test content</div>
    <div class="actions">
        <div class="ui button approve green" data-value="easy">Easy</div>
        <div class="ui button approve blue" data-value="normal">Normal</div>
        <div class="ui button approve red" data-value="hard">Hard</div>
    </div>
</div>

<div>Result: <span id="result"></span></div>

<script type="text/javascript">
$(document).on("click", ".show", function () {
    $(".ui.modal").modal("setting", {
        closable: false,
        onApprove: function () {
            return false;
        }
    }).modal("show");
}).on("click", ".ui.button", function () {
    switch ($(this).data("value")) {
    case 'easy':
        $("#result").html("easy");
        $(".ui.modal").modal("hide");
        break;
    case 'normal':
        $("#result").html("normal");
        $(".ui.modal").modal("hide");
        break;
    case 'hard':
        $("#result").html("hard");
        $(".ui.modal").modal("hide");
        break;
    }
});
</script>

工作演示：http: //jsfiddle.net/osgg8kzL/1/

Answer 2

onApprove: function (e) {
    console.log(e); // returns the button
}

所以html：

<div class="ui modal">
  <div class="content">
    choose
  </div>
  <div class="actions">
    <button class="ui button easy ok">easy</button>
    <button class="ui button normal ok">normal</button>
    <button class="ui button hard ok">hard</button>
  </div>
</div>

和js：

$('.ui.modal').modal({
  onApprove: function (e) {
    if (e.hasClass('easy')) {
       yourstuff()
    }
    if (e.hasClass('normal')) {
       yourstuff()
    }
    if (e.hasClass('hard')) {
       yourstuff()
    }
  },
}).modal('show')