我对 AEM 比较陌生,我试图在单击复选框时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点?
我已尝试按照其他答案中的建议添加 js clientlib 并将一些类和目标分别添加到复选框和目标字段,但它似乎不起作用。请帮忙。
我对 AEM 比较陌生,我试图在单击复选框时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点?
我已尝试按照其他答案中的建议添加 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。