XForms/顯示隱藏控制元件

動機

您只想在使用者想要設定或更改控制元件的值時才顯示控制元件的完整表示形式。

方法

我們將使用 switch/case 和 toggle 元素來有條件地顯示自定義控制元件。當用戶開啟表單時，此控制元件的“顯示值”可見，以及設定或更改控制元件值的觸發器。使用者選擇值後，控制元件將恢復到最小化螢幕區域的檢視。

螢幕影像

此控制元件以兩種方式顯示。第一個只佔表單的一小部分，並且是隻讀檢視。它顯示了所選月份的所有當前值。

當用戶選擇“設定月份”觸發器時，將顯示完整的控制元件。當您完成月份設定後，控制元件將恢復到隱藏模式。

示例程式碼

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events">
    <head>
        <title>Show/Hide Control</title>
        <!-- Demonstration of show/hide of a control -->
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {font-family: Helvetica, sans-serif;}
            xf|output > xf|label, xf|select > xf|label {font-weight: bold;}
        </style>
        <xf:model>
            <xf:instance xmlns="" id="save-data">
                <data>
                    <month-code>January May November</month-code>
                </data>
            </xf:instance>
            <xf:instance xmlns="" id="code-table">
                <data>
                    <month-code>January</month-code>
                    <month-code>February</month-code>
                    <month-code>March</month-code>
                    <month-code>April</month-code>
                    <month-code>May</month-code>
                    <month-code>June</month-code>
                    <month-code>July</month-code>
                    <month-code>August</month-code>
                    <month-code>September</month-code>
                    <month-code>October</month-code>
                    <month-code>November</month-code>
                    <month-code>December</month-code>
                </data>
            </xf:instance>
        </xf:model>
    </head>
    <body>
        <xf:switch>
            <!-- initially, only the label and the read-only value is visible in the first case -->
            <xf:case id="hide">
                <xf:output ref="instance('save-data')/month-code">
                    <xf:label>Current Months:</xf:label>
                </xf:output>
                <xf:trigger>
                    <xf:label>Set Months</xf:label>
                    <xf:toggle case="unhide" ev:event="DOMActivate" />
                </xf:trigger>
            </xf:case>
            <!-- if you click on the trigger called "Set Months" the full control will be visible -->
            <xf:case id="unhide">
                <xf:select ref="instance('save-data')/month-code" appearance="full">
                   <xf:label>Select Months</xf:label>
                   <xf:itemset nodeset="instance('code-table')/month-code">
                      <xf:label ref="."/>
                      <xf:value ref="."/>
                   </xf:itemset>
                </xf:select>
                <!-- once you have selected all the months in the control you can hide the control again -->
                <xf:trigger>
                    <xf:label>Hide</xf:label>
                    <xf:toggle case="hide" ev:event="DOMActivate" />
                </xf:trigger>
            </xf:case>
        </xf:switch>
    </body>
</html>

下一頁：停用按鈕 | 上一頁：相關
首頁： XForms