如何在semantic-ui模式中使用自定義回調

Question

我想在semantic-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')