jQuery UI 对话框添加内容

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 按钮 float ，所以您的分隔符也必须 float ，以便正确放置。