如何在 AEM Touch UI 中使用复选框显示/隐藏对话框字段

Question

我对 AEM 比较陌生，我试图在单击复选框时隐藏/显示对话框字段。我尝试了一些方法，但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点？

我已尝试按照其他答案中的建议添加 js clientlib 并将一些类和目标分别添加到复选框和目标字段，但它似乎不起作用。请帮忙。

Answer 1

首先你需要创建一个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。

下面是隐藏和显示的对话框选项卡：