Расположение кнопок jQuery UI Dialog

Ответ 1

Хорошо, глядя на это через Firebug...

Элемент управления Dialog создает div с классом ui-dialog-buttonpane, поэтому вы можете его искать.

Если вы имеете дело с несколькими кнопками, вам, вероятно, понадобятся атрибуты :first и :last.

Итак, $(".ui-dialog-buttonpane button:first) должен получить вам первую кнопку. и $(".ui-dialog-buttonpane button:last) должна получить последнюю кнопку.

Оттуда вы можете изменить css/style, чтобы поместить каждую кнопку справа и слева (изменить значения float).

В любом случае, вот как я сейчас подхожу к нему.

Ответ 2

Именно так я смог выполнить результаты.

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

Затем в Styles добавьте флаг! important, который необходим, потому что класс приходит первым и перезаписывается jquery.

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>

Ответ 3

Я получил следующее решение (на основе ответа The Cook). Это имеет ряд преимуществ (для меня) по сравнению с другими ответами:

• Чистый HTML/CSS - нет javascript
• Не нужно устанавливать фиксированную ширину в диалоговом окне (кнопка всегда выравнивается по левому краю, даже если пользователь изменяет размер диалогового окна)
• Нет необходимости в важном флаге! в CSS

HTML, который я использовал (слегка измененный из ответа The Cook):

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

Затем я использовал следующий CSS:

.leftButton
{
    position: absolute;
    left:8px;
}

В результате кнопка "leftButton" всегда фиксируется на 8px с левого края диалогового окна, тогда как остальные кнопки правы. Если у вас более одной кнопки, вам нужно левое оправдание, тогда вам нужно будет увеличить левый параметр по ширине предыдущих кнопок плюс любой интервал, который вы хотите для каждой кнопки, что на мой взгляд менее элегантно. Тем не менее, для одиночной левой кнопки это работает как шарм.

Ответ 4

вы также можете добавить класс в свой диалог (http://docs.jquery.com/UI/Dialog#option-dialogClass), чтобы локализовать ваш стиль.

Ответ 5

Сначала вам нужно изменить ширину .ui-dialog-buttonset на 100% в jquery-ui.css

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

Затем в вашем модальном объявлении для кнопок вы можете сделать что-то явное, как показано ниже:

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]

Ответ 6

У меня такая же проблема, но я нашел простое решение, что мы меняем порядок кнопок Ok или закрываем диалоговое окно формы, когда мы создаем диалоговое окно определения jquery ui.

Ответ 7

После выбора, попробуйте:
.prependTo(".ui-dialog-buttonpane");

Ответ 8

Я обнаружил, что .ui-dialog-buttonset сворачивает вниз без какой-либо ширины, чтобы расположить два нижних слоя в нижнем левом и правом углу, добавленные только css, как это:

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

Первая строка делает контейнер с набором кнопок 100% шириной, второй - нажатием последней кнопки, расположенной справа.

Ответ 9

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

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

Как часть определения диалога:

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Или вы можете сделать что-то вроде этого:

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

И позже создайте css для объекта myDeleteButton как плавающего влево. Установка идентификатора кнопки может быть полезна, если вы также хотите показать или скрыть кнопку без повторного создания диалога.

Протестировано в Chrome, Safari, FF, IE11, jQuery UI 1.10

Ответ 10

$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");

Ответ 11

Хорошо, как @The Cook ответ, вы можете изменить этот css в теге style.Think другим способом. Вы можете добавить стиль внутри кнопки, не нужно css больше. Хорошая удача.

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },