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;

});

一个例子是：如果单击第一个选项卡，则应隐藏 sen 电子邮件按钮

4

3 回答 3

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

您可以绑定 tabselect 事件，然后使用其索引访问选项卡，如下所示

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

将您的发送邮件功能放在您喜欢操作的标签索引上，此处显示示例

于 2012-09-18T20:18:59.923 回答
0

隐藏和显示按钮可以使用 css 和 jquery 来实现。因此，例如，在创建对话框时为每个按钮分配一个唯一的类：

“类”：“myButton1”

然后使用 jquery 显示或隐藏：

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

于 2014-07-27T10:16:53.153 回答