0

ダイアログボックスに3つのボタンを追加し、ダイアログボックス内に3つのタブがあり、クリックしたタブの機能でボタンを表示および非表示にしたい

ダイアログのコードは次のようになります

        $('a.open_dialog_edit').click(function(e) {
        //e.preventDefault();
        var tabsDiv=$('<div />').appendTo('body').load($(this).attr('href'),function(){
        //$('#tabs').tabs();


        var editor = $('.textarea').wysihtml5().data("wysihtml5").editor.setValue(getCustomText($('select#state').val(), $('input#contactname.required').val()));

        var dialog = $('#tabs').tabs(
                {
                    select: function(ev, ui) {
                        //Setup Buttons to each Tab
                        switch(ui.index) {
                        case 0:
                            $('.ui-dialog-buttonpane').find("button:contains('Email Senden')").hide();

                        break;

                        case 1:
                            $('.ui-dialog-buttonpane').find("button:contains('Speichern')").hide();

                        break;

                    }

                  }        
            }).dialog({ 

            title: $(this).attr('title'),
            modal: true,
            draggable: false,
            width: 800,
            position: 'top',
            buttons: 
                [{
                text: "Speichern",
                "class": "btn btn-primary",
                click: function () {
                    $.ajax({
                           type: "POST",
                           url: 'action.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Der Datensatz wurde gespeichert!'); // show response from the php script.
                           },
                            error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });
                },

            }, {
                text: "Email Senden",
                "class": "btn btn-primary",
                click: function () {
                    $.ajax({
                           type: "POST",
                           url: 'mailer.php',
                           data: $("#contactform").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Das Email wurde geschickt!'); // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });
                },
                text: "Rechnung herunterladen",
                "class": "btn btn-primary",
                click: function() {

                    $.ajax({
                           type: "POST",
                           url: 'docsx.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {

                               window.location.href ='rechnung.docx'; // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });

                    }
            }],

            close: function() {
                tabsDiv.remove() // so I can reload again
                location.reload(true);
//              allFields.val( "" ).removeClass( "ui-state-error" );


            },
        });

        $('select#state').on('change',function() {  
            $('ul.wysihtml5-toolbar').remove();
            alert($('select#state').val());
        $('.textarea').wysihtml5().data("wysihtml5").editor.setValue(getCustomText($('select#state').val(), $('input#contactname.required').val()));

    });

}); 

        return false;

});

例：最初のタブがクリックされた場合、senEmailボタンを非表示にする必要があります

4

3 に答える 3

1

それを行う1つの方法は、最初にダイアログ要素を保存することです

var dialog = $('<div />').appendTo('body').load($(this).attr('href')).dialog({

次に、どのタブが選択されているかを確認し、ボタンを見つけて非表示にします。

$("#tabs").tabs(select:function(ev, ui){
    switch(ui.index) {
        case 1:
             dialog.find("button").show().filter(":contains('Send Email')").hide();
        break;

    }
    //alternatively can do this if the tabs and buttons are in the same order
    //lots of ways to do this...
    dialog.find("button").show().eq(ui.index).hide();
});

show()更新:非表示にするボタンを非表示にする前に、最初に他のすべてのボタンを使用する必要があります。

于 2012-09-18T20:23:55.750 に答える
0

ボタンの非表示と表示は、css と jquery を使用して実現できます。たとえば、ダイアログを作成するときに、各ボタンに一意のクラスを割り当てます。

"クラス": "myButton1"

次に、jquery を使用して表示または非表示にします。

$( '.myButton1' ).show(); $( '.myButton1' ).hide();

于 2014-07-27T10:16:53.153 に答える
0

以下に示すように、tabselect イベントをバインドし、そのインデックスを使用してタブにアクセスできます。

   $('#tabs').bind('tabsselect',function(event, ui) {
            if(ui.index==2){

操作したいタブインデックスにメール送信機能を配置します。例を次に示します

于 2012-09-18T20:18:59.923 に答える