jQuery UI 어떤 DIV가 표시되는지에 따라 단추를 변경하십시오.

Question

buttons 매개 변수와 함께 jquery 대화 상자가 있습니다.

내 대화 상자에서 오버플로가 숨겨진 너비가 두 배인 div가 있습니다. 버튼은 "취소"또는 "다음"입니다. 고객이 취소를 클릭하면 사라집니다. 그들이 다음을 클릭하면 두 배 넓이의 div가 슬라이드되어 다음 단계를 보여줍니다. 이것은 잘 작동하지만, 나는 그때, 버튼, 그리고 그들의 행동을 바꿀 필요가있는 "돌아 가기"라고 뒤로 물러나고, "제출"은 폼을 제출할 필요가있다. 나는 이것을 가지고 있는데, 지금까지 :

the_form.dialog({ 
    autoOpen: false, 
    resizable: false, 
    modal: true, 
    width: 700, 
    height: 500, 
    'open': function(){ 
     $('#new_membership_form_content').load('/ajax', {'index': the_form.attr('data-index'), 'race_index': the_form.attr('data-index')}); 
    }, 
    'close': function(){ 
     $('#new_membership_form_content').html('<img src="/wait.gif"/>'); 
    }, 
    buttons: { 
     'Cancel': function(){ 
      the_form.dialog('close'); 
     }, 
     'Next': function(){ 
      $("#join_form_container").animate({ 
       left: '-672px', 
      }, 1500, "easeOutExpo"); 
     } 
    } 
}); 

어떤 도움이 환상적일까요? : D 미리 감사드립니다.

편집 : 여기에 달성하려고하는 의사 코드가 있습니다. 그래도 작동하지 않습니다 ... (함수의 내용을 무시하고 붙여 넣기 만합니다).

 buttons: { 
     if($("#join_form_container").css("left") == "0px"){ 
      'No, thanks'  : function(){the_form.dialog('close')}, 
      'Add to basket' : function(){$("#join_form_container").animate({left: '-672px'}, 1500, "easeOutExpo")}, 
     }else{ 
      'Go back'  : function(){$("#jasdainer").animate({left: '-672px'}, 1500, "easeOutExpo")}, 
      'Submit'   : function(){$("#jasdainer").animate({left: '-672px'}, 1500, "easeOutExpo")} 
     } 
    } 

Answer 1

그래서 버튼 기능을 변경하려는 경우를 나타내는 일종의 플래그가 있거나 버튼 리 바인딩을 처리하는 함수를 호출 할 수 있습니다.

같은

function rebindCancel() { 
    $('#cancelButton').unbind('click'); 
    $('#cancelButton').bind('click', function(event) { 
     //Add the code for what you want the Cancel button to rebind to 
}); 

아래로

당신의 CSS를 변경, rebindCancel를 호출 할 때() 그리고 당신은 다시 초기 상태로 리 바인드 반대를하지 다른 방법을 가질 수 있습니다.

또는 플래그가있을 수 있습니다.

var cssChanged = false; 
function rebindCancel() { 
    $('#cancelButton').bind('click', function(event) { 
     if (cssChanged == false) { 
      //Bind the initial code here 
     } else { 
      //Bind the alternate code here when the css left == 0px 
     } 
});