上传按钮这是我如何在Image组件关掉allowUpload和更新,以显示拖放区,当您从资产栏拖动一个项目,显示了对话。
所以在TouchUI对话框中,您将需要创建新的图像组件。
创建图像组件
/apps/<your-app>/components/content
创建节点图像JCR:primaryType CQ:组件
给它的属性
sling:resourceSuperType = wcm/foundation/components/image
componentGroup = <your component group>
吊索:resourceSuperType现在将继承所有属性,功能和对话框的wcm/foundation/components/image
现在我们要创建一个TouchUI cq:对话框覆盖。
在你的新形象节点创建一个节点CQ:对话框JCR:primaryType nt:unstructured
给它的属性
jcr:title="Image"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Image"
因为我们的组件从基础图像成分,我们也继承了继承对话框。就像5.6版本中的jsps一样,我们只需要覆盖我们需要的部分。
创建,所以我们可以覆盖该文件节点的某些属性的结构(/内容/项目/图像/项目/列/项)
- 在CQ:对话框中创建一个新的节点内容JCR:primaryType NT:非结构化
- 在内容创建新的节点项目JCR:primaryType NT:非结构化
- 在项目创建图像JCR:primaryType NT:非结构化
- 在图像创建项目JCR:primaryType NT:非结构化
- 在项目创建列JCR:primaryType NT:非结构化
- 在列创建项目JCR:primaryType NT :非结构化的
现在我们要禁用文件上传选项
下的文件节点创建一个新的属性 的真正
这禁用布尔值禁用上传按钮,作者可以从侧边栏拖放项目,但我想要我的用户界面更直观一点,通过让他们可以放下目标的区域可见。
在CRXDE精简版浏览到
/库/花岗岩/ UI /组件/基础/表格/文件上传
复制文件上传文件夹
导航回到你的图像组件和粘贴该项目。
打开fileupload.jsp在CRXDE
在线240右侧下fieldAttrs.addClass( “珊瑚表格场”); 添加此
// show drop target when disabled
if(cfg.get("disabled", false)){
fieldAttrs.addClass("is-active");
}
这将完成自动的“是活跃的” CSS类添加到该文件上传下降目标输入。这反过来会显示从资产查找工具拖动图像时看到的目标。
然后在第253行的buttonAttrs下。addClass(“coral-FileUpload-trigger coral-Button”); 添加此
// hide button when button is disabled
if(cfg.get("disabled", false)){
buttonAttrs.add("style","display:none;");
}
这将隐藏残疾人上传图片按钮,所以没有混乱,为什么按钮是无效的。
现在我们必须更新您的对话框,以使用我们的新窗体fileupload。
浏览到您的文件节点
/apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file
添加属性
sling:resourceType="/apps/<your-app>/components/content/image/form/fileupload"
现在你可以在页面上删除您的图像组件,看看你的新对话框。