अर्थात्-ui मोडल

Question

में कस्टम कॉलबैक का उपयोग कैसे करें मैं easy, normal और hard के रूप में प्रतिक्रिया उद्देश्य के लिए अर्थात्-यूई मोडल में 2 से अधिक बटन का उपयोग करना चाहता हूं। और मुझे बटन क्लिक के अनुसार कार्रवाई करने की भी आवश्यकता है।

मुझे पता है कि बटन को स्वीकृति और इनकार करने का तरीका कैसे उपयोग करें (मैं इसे 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 
} 

तो एचटीएमएल:

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