jQuery UI Dialog, добавление элементов рядом с кнопкой

Question

Одной из приятных особенностей диалогового окна jQuery UI является то, что у него есть опция для кнопок, которая автоматически размещает их правильно. Мне просто интересно: можно ли как-то разместить элементы рядом с кнопками? У меня есть небольшой GIF-файл Ajax-Loader, который я хотел бы отобразить в левом нижнем углу диалогового окна, в то время как кнопки остаются в правом нижнем углу?

Я знаю, что могу просто удалить кнопки и создать их вручную в HTML, но поскольку jQuery уже позаботился о позиционировании и стилизации, я бы хотел сохранить эту функциональность, если это имеет смысл.

    $("#newProjectDialog").dialog({
        bgiframe: true,
        resizable: false,
        width: 400,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Create': function() {
                $("#ajax-loader").show();
                // Make the Ajax Call and whatever else is needed
                $(this).dialog('destroy');
            },
            Cancel: function() {
                $(this).dialog('destroy');
            }
        }
    });

Answer 1

Все, что вам в основном нужно сделать, это

//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();

Ниже причудливая версия с некоторыми соображениями.

---

Я думаю, #ajax-loader будет выглядеть примерно так

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>

или только это

<img id='ajax-loader' src='loader.gif' />

JavaScript может выглядеть так

...
'Create': function() {
    var btnpane = $("div.ui-dialog-buttonpane");
    //prevent bad things if create is clicked multiple times
    var there = btnpane.find("#ajax-loader").size() > 0;
    if(!there) {
        $("#ajax-loader").clone(true).appendTo(btnpane).show();
        // Make the Ajax Call and whatever else is needed
        // if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
        $(this).dialog('destroy');
    }
},
...

Записка

• Вы должны вызывать .dialog('destroy') в событии complete запроса ajax, иначе диалоговое окно может быть уничтожено до завершения запроса ajax, и пользователь может даже не увидеть «загрузчик».

Answer 2

Как насчет того, чтобы просто вставить спиннер перед первой диалоговой кнопкой?

buttons: {
   'Create' : function() {
       $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
       ...ajax stuff...
       $(this).dialog('destroy');
    }
}

Answer 3

Лучший способ сделать это - создать еще одну кнопку, сделать ее полностью прозрачной без рамки и добавить анимированный GIF в качестве фонового изображения. Используя другую кнопку, вы можете легко определить ее положение относительно всех остальных кнопок.

Во-первых, чтобы иметь возможность больше стилизовать кнопки, вам нужно создать их на один уровень выше. Так что вместо:

buttons: {
    'Create': function() {
        $("#ajax-loader").show();
        // Make the Ajax Call and whatever else is needed
        $(this).dialog('destroy');
    },
    Cancel: function() {
        $(this).dialog('destroy');
    }
}

Сделайте это так (обратите внимание на квадратные скобки и еще один уровень отступа):

buttons: [
    {
        id: 'create-button',
        class: 'create-button-class',
        text: 'Create',
        click: function() {
            $("#ajax-loader").show();
            // Make the Ajax Call and whatever else is needed
            $(this).dialog('destroy');
        }
    },
        text: 'Cancel',
        click: function() {
            $(this).dialog('destroy');
        }
    }
]

Вы можете назначить идентификатор и класс каждой кнопке или нет. Если вы назначите идентификатор и / или класс, тогда вы можете применить к нему CSS-стилизацию.

<style>
.create-button-class{
    height:50px;
    width:50px;
    left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button { 
    color: transparent; /* no inner color and also hides text */
    border: none; /* removes border */
    background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
    background-size: 50px;
    background-repeat: no-repeat;
}
</style>

Если хотите, создайте обычную дополнительную кнопку и используйте свойство CSS влево, чтобы переместить ее на панель кнопок как можно дальше, прежде чем сделать ее прозрачной и без рамки.