Wie benutzerdefinierte Callback in Semantic-Ui-Modal

Question

verwenden Ich möchte mehr als 2 Schaltfläche in semantic-ui modal für Feedback-Zwecke als easy, normal und verwenden. Und ich muss auch die Aktion entsprechend der Schaltfläche ausführen.

Ich weiß, wie zu verwenden, zu genehmigen und zu verweigern Taste (ich kann es für 2 Tasten verwenden). Aber wie geht man mit diesen 3 Tasten mit 3 verschiedenen Callbacks um.

Oder eine alternative Lösung dafür.

Answer 1

Nun, die perfekte Lösung wäre, wenn es möglich wäre zu wissen, welche Taste in einem der Rückrufe gedrückt wurde. Leider kann ich dazu keinen Weg finden.

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

Fügen Sie also anstelle von oben Ereignis-Listener zu Ihren Schaltflächen hinzu. Auf diese Weise wissen Sie, welcher Callback ausgeführt werden soll.

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

Arbeits Demo: http://jsfiddle.net/osgg8kzL/1/

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

und js:

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