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

I want to use more than 2 button in semantic-ui modal for feedback purpose as easy,normal and hard. And I also need to perform action according to button clicked.

我想在语义ui模式中使用2个以上的按钮,以便反馈,简单,正常和困难。而且我还需要根据点击的按钮执行操作。

I know how to use approve and deny button (I can use it for 2 buttons). But how to handle these 3 buttons with 3 different callback.

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

Or any alternative solution for this.

或任何替代解决方案。

2 个解决方案

#1

Well, the perfect solution would be if it were possible to know which button was pressed in any of the callbacks. Unfortunately I can't find a way to do that.

好吧,完美的解决方案是,如果有可能知道在任何回调中按下了哪个按钮。不幸的是我无法找到办法。

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

So, instead of above, add an event listeners to your buttons. This way you know which callback to execute.

因此,不是在上面,而是向按钮添加事件侦听器。这样您就知道要执行哪个回调。

<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>

Working demo: http://jsfiddle.net/osgg8kzL/1/

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

#2

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

So 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>

and js:

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

#1