1

ボタンパラメーターを使用したjqueryダイアログがあります。

私のダイアログには、オーバーフローが隠されている幅の 2 倍の div があります。ボタンは「キャンセル」または「次へ」です。キャンセルをクリックすると、消えます。[次へ] をクリックすると、2 倍の幅の 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")}
        }
    }
4

1 に答える 1

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
        }
});
于 2012-07-03T14:22:37.610 に答える