如何在AEM Touch UI中使用复选框显示/隐藏对话框字段
我对AEM比较陌生,我尝试在复选框单击时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点如何在AEM Touch UI中使用复选框显示/隐藏对话框字段,aem,aem-touch-ui,Aem,Aem Touch Ui,我对AEM比较陌生,我尝试在复选框单击时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点 我尝试过添加js clientlib,并分别向复选框和目标字段中添加一些类和目标,正如其他答案中所建议的那样,但似乎不起作用。请提供帮助。首先,您需要创建一个clientLibs并将类别添加为cq.authoring.dialog.all,请参阅下面的代码: (function($, $document) { $document.on("dialo
我尝试过添加js clientlib,并分别向复选框和目标字段中添加一些类和目标,正如其他答案中所建议的那样,但似乎不起作用。请提供帮助。首先,您需要创建一个clientLibs并将类别添加为cq.authoring.dialog.all,请参阅下面的代码:
(function($, $document) {
$document.on("dialog-ready", function() {
Coral.commons.ready($document, function () {
dispalyOrHideTabs();
$(document).on('change', '#showText', function() {
if($('#showText').attr('checked')){
show('1');
}else{
hide('1');
}
});
$(document).on('change', '#showTable', function() {
if($('#showTable').attr('checked')){
show('2');
}else{
hide('2');
}
});
function hide(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.addClass("hide");
}
function show(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.removeClass("hide");
}
function dispalyOrHideTabs(){
var editable = Granite.author.DialogFrame.currentDialog.editable;
if(editable){
var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
if(node){
var storedTextValue = node.showText;
var storedTableValue = node.showTable;
if(storedTextValue){
show('1');
}else{
hide('1');
}
if(storedTableValue){
show('2');
}else{
hide('2');
}
}
}
}
});
});
})($, $(document));
将granite:id属性添加为复选框资源类型的showText
下面是将隐藏和显示的对话框选项卡:
添加了js clientlib和granite:id属性和目标id,仍然不起作用。不确定,如果您理解了代码,这是基于coral3的,您必须定义复选框字段的正确id,并且在代码中显示/隐藏对话框的不同选项卡。由于您的要求是在同一选项卡中显示/隐藏另一个字段,因此您可以修改代码以添加和删除“hide”类,并相应地添加或删除“hide”类。请附上代码示例。