如何在 aem 中为 Cf# 模式提供背景颜色？

Question

在 AEM 中，我想在页面处于 CF# 模式时为页眉提供背景颜色。

我怎样才能实现这个目标？

Answer 1

注意：在执行以下步骤之前，请检查 cq.authoring.dialog clientlib 是否以 cf# 模式加载。

使用 cq.authoring.dialog 客户端库和 jQuery。

创建一个类别为 cq.authoring.dialog 的 clientlib。此 clientlib 中的脚本仅在 author instance.
添加一个class到你的header对话框使用granite:class属性如果你使用coralui或class否则，这是挂钩使用上述 clientlib

  <header
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="ID"
    granite:class="headerSelector"
    name="./header"
    required="{Boolean}true"/>

您会注意到上面 DOM.

headerSelector

使用 foundation-contentloaded 等 OOTB 花岗岩事件侦听器之一在对话框初始化时触发脚本。
通过jQuery

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $headerField= $('.headerSelector');
    $headerField.css('background-color','blue');
})

如何在 aem 中为 Cf# 模式提供背景颜色？

How to give background color for Cf# mode in aem?

aem