【问题标题】:How to style jQueryUI dialog header with specific ID?如何为具有特定 ID 的 jQueryUI 对话框标题设置样式?
【发布时间】:2014-04-05 15:12:31
【问题描述】:

我想更改 jQueryUI 对话框标题中 TitleBar 的样式,例如我想要绿色背景 - 它应该只应用于由 ID 指定的一个对话框。这就是为什么我写了这样的东西:

#sendInviteRequestDialog .ui-dialog .ui-widget-header{
    background-color: green !important;
}

但不幸的是,它没有用。我尝试过这样的事情:

#sendInviteRequestDialog > .ui-dialog > .ui-widget-header{
    background-color: green !important;
}

但这也没有解决我的问题。我究竟做错了什么? 提前谢谢你。

【问题讨论】:

    标签: jquery css jquery-ui jquery-ui-dialog


    【解决方案1】:

    对话框标记(覆盖阴影、边框、背景、标题栏、关闭按钮、拖动手柄等)被添加到您调用 .dialog() 的 div 之外。所以#sendInviteRequestDialog .ui-dialog .ui-widget-header 不会按预期工作。

    要设置特定对话框的样式,请使用dialogClass 选项:

    指定的类名将被添加到对话框中,例如 其他主题。

    示例代码:

    $("#sendInviteRequestDialog").dialog({
        modal: true,
        dialogClass: "custom-dialog-1"
    });
    

    生成的标记:

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all custom-dialog-1 ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-id-1" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 300px; top: 29.5px; left: 125.5px; display: block;">
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
        <div id="sendInviteRequestDialog" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 82px; height: auto;">Content</div>
        <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
        <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
    </div>
    

    示例 CSS:

    .custom-dialog-1 .ui-widget-header {
        background: green;
    }
    

    Demo on jsFiddle

    请注意,我使用了background 快捷方式而不是background-color;这会重置所有背景属性,包括背景图像。标题栏的默认背景颜色实际上是一张图片。

    【讨论】:

      【解决方案2】:

      接受的答案建议使用“dialogClass”,但截至今天,这是一个已弃用的属性(从 jQuery UI v1.12 开始)。

      已被“类”取代 - http://api.jqueryui.com/dialog/#option-classes

      例子:

      $("#sendInviteRequestDialog").dialog({
          modal: true,
          classes: {
              "ui-dialog": "custom-dialog-1"
          }
      });
      

      【讨论】:

        【解决方案3】:

        如果您想更改特定对话框的标题,您可以使用类似的内容,而无需修改/覆盖 jquery ui css。 dialogClass 选项配置对话框主体。

        $('#dialog-div-name')
        .parent()
        .find('.ui-dialog-titlebar')
        .addClass('custom-dialog-header-class');
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2012-07-12
          • 2013-04-20
          • 2014-12-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-05-06
          • 1970-01-01
          相关资源
          最近更新 更多