Question

我有一个下拉列表，有两个选项＆＃34; image＆＃34;和＆＃34; icon＆＃34;。

当用户选择＆＃34;图像＆＃34;我想展示路径浏览器以及何时选择＆＃34; icon＆＃34;我将显示一个文本字段。

这是一个着名的问题，现在我想在上述提到的字段位于Touch UI的多字段内时这样做。

所以说我在这个多字段下有两个项目，当我选择＆＃34;图像＆＃34;，在第一个项目（多字段）中的选择中，OOTB showhide隐藏我的＆＃34;图标＆＃34 ;多场中第一个和第二个项目条目的文本字段。

如何解决此问题？

长话短说See Blog。我想做这个。只是我的领域在多领域内。

注意：我能够使用ExtJs field.nextSibling（）实现Classic UI代码，因此我不会影响其他多字段项条目中的条目。

Answer 1

查找下面的代码，有关详细信息，请在此处查看此gitlink

<强> .content.xml

<enable
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    text="Enable"
    id="enable"
    value="true"
    name="./enable"
    class="cq-dialog-checkbox-showhide"
    cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/hidden"
        name="./enable@Delete"
        value="true"/>
<showHideContainer
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="hidden button-option-enable-showhide-target"
        showhidetargetvalue="true">
    <items jcr:primaryType="nt:unstructured">

        <!-- some components to show/hide -->

    </items>
</showHideContainer>

<强> checkboxshowhide.js

(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        $(".cq-dialog-checkbox-showhide").each( function() {
            showHide($(this));
        });

    });

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
        showHide($(this));
    });

    function showHide(el){

            // get the selector to find the target elements. its stored as data-.. attribute
            var target = el.data("cqDialogCheckboxShowhideTarget");

            // is checkbox checked?
            var checked = el.prop('checked');

            // get the selected value
            // if checkbox is not checked, we set the value to empty string
            var value = checked ? el.val() : '';

            // make sure all unselected target elements are hidden.
            $(target).not(".hide").addClass("hide");

            // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
            $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");

       }

    })(document,Granite.$);

如何在Touch UI AEM 6中基于多字段内的选择显示隐藏元素？

1 个答案: