JQuery UI Диалог Позиционирование кнопки

Question

Как я могу расположить кнопки из jQuery UI отдельно друг от друга. Кнопки выровнены в одном направлении. Я бы хотел, чтобы одна кнопка была выровнена по левому краю, а другая - по правому. Возможно ли это?

Answer 1

ОК, глядя через Firebug ...

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

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

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

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

Во всяком случае, именно так я бы подошел к этому прямо сейчас.

Answer 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>

Answer 3

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

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

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

$('#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» всегда фиксируется на расстоянии 8 пикселей от левого края диалогового окна, тогда как остальные кнопки выровнены по правому краю. Если у вас есть более одной кнопки, которую нужно выровнять по левому краю, то вам нужно будет увеличить левый параметр на ширину предыдущих кнопок плюс любой интервал, который вы хотите для каждой кнопки, что, на мой взгляд, не так уж и элегантно. Однако для одной кнопки с выравниванием по левому краю это работает как брелок.

Answer 4

Сначала вы должны изменить ширину .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');}, 
                  }
        }
             ]

Answer 5

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

Answer 6

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

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

Answer 7

.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

Answer 8

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

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

В первой строке контейнер для кнопки устанавливается шириной 100%, во второй - последняя найденная кнопка справа.

Answer 9

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

Answer 10

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