JQuery UI диалог добавил контент - PullRequest
Новая
       6

JQuery UI диалог добавил контент

4 голосов
/ 31 марта 2011

Есть ли способ добавить контент между двумя кнопками для диалогового окна jQuery UI ?С кодом ниже, я бы хотел, чтобы между двумя кнопками было написано OR.Возможно ли это? 

$("#dialog-delivery").dialog({
              bgiframe: true,
              resizable: true,
              height:350,
              width:400,
              modal: true,
              buttons: {
                  "Continue": function() {
                        $(this).dialog( "close" );
                        $(".option-separate").hide();
                        $("#nonsubscribers").hide();
                        $('<div class="radio-alert">Thank you for your selection</div>').appendTo('#subscribers');
                        $("#change-subs").css('visibility','visible');
                    },
                    "Change to Non-Subscriber": function() {
                          $(this).dialog( "close" );
                          $("#subscribers").hide();
                          $(".option-separate").hide();
                          $("#nonsubscribers").show();
                          $("#change-nonsubs").css('visibility','visible');
                      }
              }
    });

1 Ответ

5 голосов
/ 01 апреля 2011

Немного хак, но взгляните на эту демонстрацию ->

Соответствующим дополнением является обработчик открытия диалога: 

open: function() {
    $('.ui-button-text:contains("Continue")')
        .parent()
        .after('<div class="button-divider">OR</div>');
}

Что это делает: выберите кнопку пользовательского интерфейса с определенным текстом и вставьте <div> после нее. Класс важен, потому что вам потребуется по крайней мере один стиль CSS для правильного размещения разделителя. Вот стили, которые я использовал: 

.button-divider {
    margin: .5em .2em .5em 0;
    float: right;
    padding: .2em 0 .3em 0;
    width: auto;
}

Важной частью является float:right;, потому что кнопки пользовательского интерфейса плавают, поэтому ваш разделитель также должен плавать, чтобы правильно размещаться.

...