Как использовать пользовательский обратный вызов в semantic-ui modal

Question

Я хочу использовать более 2-х кнопок в семантико-ui-моделе для целей обратной связи как 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')