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

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