在 mucow 文件中，如何在 pageItemHTML 中进行条件 HTML 插入

我正在为 Adobe Muse CC 制作一个小部件。我想在部分 html 标签中隐藏/显示标题和徽标。

将组件初始化为带有徽标和标题的部分标记

然后，用户可以：

隐藏或显示徽标
隐藏或显示标题

my-widget.mucow

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="toolbar" formatNumber="6" localization="none"  creator="CreatorName" supportedSizePolicies="fixed,browserWidth" outputAsFixedHeight="true" defaultWidth="900" defaultHeight="32" isResizable="true">
    <parameters>
        <!-- Widget options -->
        <builtIn name="width" value="900"/>
        <number name="paddingToolbarLeft" min="0" max="50" step="5" defaultValue="10" label="Padding Left : "/>
        <number name="paddingToolbarRight" min="0" max="50" step="5" defaultValue="10" label="Padding Right : "/>
        <separator/>
        <bool name="toggleLogo" label="Use Logo" defaultValue="noLogo">
            <trueVal value="yesLogo">
            // Show logo
            </trueVal>
            <falseVal value="noLogo" disableOptions="logoToolbar">
            // Hide logo
            </falseVal>
        </bool>
        <section label="Logo" expanded="true" name="logoToolbar" >
            <file fileTypes="*.png;*.jpg;*.jpeg;*.gif" filterLabel="Image Files" label="Image" name="logoToolbar" fileRequiedForOutput="true" tooltip="Image"/>
        </section>
        <separator/>
        <bool name="toggleTitle" label="Use Title" defaultValue="yesTitle">
            <trueVal value="yesTitle">
            // Show title
            </trueVal>
            <falseVal value="noTitle" disableOptions="titleToolbar">
            // Hide title
            </falseVal>
        </bool>
        <section label="Title" expanded="true" name="titleToolbar" >
            <text name="titleLabel" defaultValue="Toolbar" label="Title" />
            <number name="levelHeader" min="1" max="6" step="1" defaultValue="1" label="Level title : "/>
        </section>
        <separator/>
    </parameters>
    <headHTML>
     //css
    </headHTML>
    <pageItemHTML>
        <!-- insert the Widget <body> HTML here -->
        <![CDATA[
        <section class="toolbar">
            <img class="logo" src="{param_logoToolbar}"/> <-- hide or show
            <h{param_levelHeader} class="title">{param_titleLabel}</h{param_levelHeader}> <-- hide or show
       </section>
       ]]>
       </pageItemHTML>
  </HTMLWidget>

有没有办法添加这两个切换选项？

是的，你可以。

如文档（http://adobe-muse.github.io/MuCowDocs/#h-bool-）中所述，您只需使用 trueval-tag 和 falseval-tag 即可执行所需的操作。请注意，在这些标签之间，您可以添加任何 Muse-HTML 组件，而不仅仅是<pageItemHTML> 。

例如

<parameters>
  <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
        <trueVal value="yesIcon">
            <pageItemHTML>
                <![CDATA[ 
                    <!-- this is my TRUE-HTML content --> 
                ]]>
            </pageItemHTML>
        </trueVal>
        <falseVal>
            <pageItemHTML>
                <![CDATA[ 
                    <!-- this is my FALSE-HTML content --> 
                ]]>
            </pageItemHTML>
        </falseVal>
  </bool>
</parameters>

编辑

我认为这个文档更好：https://github.com/Adobe-Muse/MuCowDocs

编辑2经过测试和工作的代码：

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="stackoverflowtest" formatNumber="6"
            localization="none" creator="Antonio"
            defaultWidth="300" defaultHeight="300"
            isResizable="true" isResponsive="true">
    <parameters>
        <info label="This is a test..." />
        <separator />
        <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
            <trueVal value="yesIcon">
                <pageItemHTML>
                    <![CDATA[ 
                        <section class="my-widget">
                            <h1 class="title">Titre</h1>
                            <p>Here is my logo...</p>
                        </section>
                    ]]>
                </pageItemHTML>
            </trueVal>
            <falseVal value="noIcon">
                <pageItemHTML>
                    <![CDATA[ 
                        <section class="my-widget">
                            <h1 class="title">Nothing to show</h1>
                        </section>
                    ]]>
                </pageItemHTML>
            </falseVal>
        </bool>
    </parameters>
<pageItemPosterHTML>
<![CDATA[ ]]>
</pageItemPosterHTML>
</HTMLWidget>

编辑3

第三次尝试后，我得到了你想要的:D只需使用Javascript即可做到这一点。您可以根据需要定义任意数量的复选框，并使用JS检查它们的值，然后完成其余的工作...这里有一个简单的例子：

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="stackoverflowtest" formatNumber="6"
                  localization="none" creator="Antonio"
                  defaultWidth="300" defaultHeight="300"
                  isResizable="true" isResponsive="true">
    <parameters>
        <info label="This is a test..." />
        <separator />
        <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
            <trueVal value="true" />
            <falseVal value="false" />
        </bool>
    </parameters>
    <pageItemHTML>
        <![CDATA[
            <script>
            if ({param_toggleIcon}) {
                // create your element
                // and append it to the right position
            }
            </script>
        ]]>
    </pageItemHTML>
</HTMLWidget>

相关内容

最新更新

热门标签：