时间戳

首页 > 解决方案 > 如何在 aem 中为 Cf# 模式提供背景颜色？

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

问题描述

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

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

标签： aem

解决方案

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

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

  • 创建一个类别为cq.authoring.dialog. 此 clientlib 中的脚本仅在作者实例中加载。
  • 如果您正在使用，则使用该granite:class属性将一个类添加到您的标题对话框，否则，这是使用上述客户端库中的脚本挂钩到标题中的字段coraluiclass
  <header
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="ID"
    granite:class="headerSelector"
    name="./header"
    required="{Boolean}true"/>
  • 您会注意到headerSelector上面在 DOM 中注册的类名。
  • 使用 OOTB granite 事件侦听器之一，例如foundation-contentloaded在对话框初始化时触发脚本。
  • 通过添加背景颜色jQuery
$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $headerField= $('.headerSelector');
    $headerField.css('background-color','blue');
})

推荐阅读