2011-10-11 3 views
0

MooTools 확인 상자 기능을 개발 중입니다. 나는 OK와 CANCEL 두 개의 버튼이 있습니다.MooTools 함수 반환 값

그래서 OK를 클릭하면 TRUE를 반환하고 CANCEL을 클릭하면 FALSE를 반환합니다.

여기 내 기능 코드입니다.

function confirm_box(title, text) 
{ 
    var className = 'msgAlert info'; 
    var defaut_title ='Information'; 

    // Placing the Overlay 
    var overlay = new Element('div', {'class':'msgAlert_overlay'}); 
    $$('body').adopt(overlay); 

    // Placing the Main Div With class name 
    var main_box = new Element('div', {'class': className}); 
    $$('body').adopt(main_box); 

    var content_div = new Element('div', {'class':'msgAlert_popup'}); 
    //<a href="javascript:;" class="msgAlert_close"></a> 
    if(title == '') 
     title=defaut_title; 
    content_div.set('html','<div class="msgAlert_header"><h4>'+title+'</h4></div><div class="msgAlert_content">'+text+'</div>'); 
    main_box.adopt(content_div); 

    content_div.getChildren('a.msgAlert_close'); 

    var footer_div = new Element('div',{'class':'msgAlert_footer'}); 
    var ok_btn = new Element('button'); 
    ok_btn.addEvent('click', function(){ 
     main_box.fade(0); 
     //overlay.fade(0); 
     (function(){main_box.dispose(); overlay.dispose(); }).delay(350); 
     return true; 
    }); 

    var cancel_btn = new Element('button'); 
    cancel_btn.addEvent('click', function(){ 
     main_box.fade(0); 
     //overlay.fade(0); 
     (function(){main_box.dispose(); overlay.dispose();}).delay(350); 
     return false; 
    }); 

    ok_btn.set('html','Ok'); 
    cancel_btn.set('html','Cancel'); 
    footer_div.adopt(ok_btn); 
    footer_div.adopt(cancel_btn); 
    main_box.adopt(footer_div); 
    ok_btn.focus(); 
} 

각 버튼을 클릭하면 TRUE와 FALSE가 반환됩니다.

같이 다만를 :이 작동하지 않을

if(confirm_box(title, text)) 
{ 
alert('Yes'); 
} 
else 
{ 
alert('No'); 
} 

답변

1

은 내가 그래서 난 그냥 JS의 확인 상자처럼 내 기능에 액세스 할 수 있습니다 가야에서 어떤 방법으로 제안 할 수 있습니다. 기본적으로, 당신은 사용할 수있는 네이티브 당신이 확인 상자를 복제 할 때

하면, 당신은 이벤트와 작업해야

는 UI 스레드를 차단하고 있기 때문에, 괜찮 if (confirm("are you sure")) { ... } else { ... }

... 콜백 메소드 대신 함수에 반환 값이 없습니다.

의사 코드에서이 될 것입니다 : Mootools의과 수업의 맥락에서

var confirm_box = function(title, text, onConfim, onCancel) { 

    ... 
    confirmEl.addEvent("click", onConfirm); 

    cancelEl.addEvent("click", onCancel); 
}; 


confirm_box("Are you sure?", "Please confirm by clicking below", function() { 
    alert("yes"); 
}, function() { 
    alert("no"); 
}); 

, 당신은 대신에 이벤트와 작동 확인 클래스를 수행 할 수 있습니다. 예를 원하면 나 한테 큰소리 쳐.

+0

네, 그 예가 제가 이해하기에 더 좋을 것입니다 ... – Avinash

+0

방금 ​​전 구식 수업을 연장했습니다. http://jsfiddle.net/dimitar/s538U/1/ vs http://jsfiddle.net/dimitar/s538U/ (원래 모달 상자) –

+0

사실 조금 더 세련되었습니다. http://jsfiddle.net/dimitar/s538U/4/ - 잠시 동안 우리 백 오피스에 확인 기능을 추가한다는 의미였습니다. :) –