我有一个jquery对话框,带有buttons参数。
在我的对话框中,我有一个div,宽度是宽度的两倍,隐藏了溢出。按钮是:“取消”或“下一步”。如果他们点击取消,它就会消失。如果他们单击下一步,则两次宽度的div滑过,显示下一个阶段。这工作正常,但我需要,按钮,他们的行动要改变,说“Go Back”会滑回,而“Submit”会提交表格。到目前为止,我有这个:
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")}
}
}
答案 0 :(得分:1)
所以,我会想要一些表示你想要更改按钮功能的标志,或者你可以调用一个函数来处理按钮的重新绑定。
当你的css发生变化时,请调用rebindCancel(),如下面的
function rebindCancel() {
$('#cancelButton').unbind('click');
$('#cancelButton').bind('click', function(event) {
//Add the code for what you want the Cancel button to rebind to
});
然后你可以使用另一种方法,将其重新绑定到初始状态。
或者,你可以有一面旗帜。
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
}
});