Question

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

我如何实现这个目标？

Answer 1

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

使用cq.authoring.dialog clientlib和jQuery。

创建一个类别为cq.authoring.dialog的clientlib。此clientlib中的脚本仅加载到author instance中。
如果使用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＃模式赋予背景色？

1 个答案: