Question

有没有办法在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');
                      }
              }
    });

Answer 1

It's a little hack-y, but have a look at this demo ->

相关的添加是一个对话框打开处理程序：

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

这样做：选择带有特定文本的ui按钮，然后在其后插入<div>。该类非常重要，因为您需要至少一种CSS样式才能正确放置分隔符。以下是我使用的样式：

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

重要的部分是float:right;，因为ui按钮是浮动的，所以你的分隔符也必须浮动，以便正确放置。

jQuery UI对话框添加了内容

1 个答案: