在mucow文件中,如何在pageItemHTML中创建条件HTML插入?

时间:2017-10-19 15:13:35

标签: xml widget muse

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

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

然后,用户可以:

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

我-widget.mucow

UPDATE 
 Table_A
INNER JOIN 
 Table_B
ON
 Table_A.code = Table_B.code 
SET 
 Table_A.phone = Table_B.phone

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

1 个答案:

答案 0 :(得分:0)

是的,你可以。

如文档(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

<强> EDIT2 经过测试和工作的代码:

<?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>

<强> EDIT3

在第三次尝试后,我得到了你想要的东西: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>