XForms/摘要詳細資訊

動機

您有一個很長的專案列表，每個專案都有大約半屏的專案詳細資訊需要編輯。您希望快速滾動檢視專案表並更改所選專案的詳細資訊。

方法

我們將把螢幕分成兩部分。上半部分提供一個專案的表格列表，每個專案在一行上顯示。當您選擇一個專案時，該專案的詳細資訊將顯示在螢幕的下半部分。

螢幕影像

caption: note that when the mouse is in the second row the inspector is focused on the second item — 標題：請注意，當滑鼠位於第二行時，檢查器將聚焦在第二項上

請注意，當滑鼠位於第二行時，檢查器將聚焦在第二項上。

示例程式碼

我們讓底部面板更改為所選行的上下文的方法是使用一個 <xf:group> 元素，該元素將始終聚焦在所選行上。

<xf:group ref="instance('save-data')//item[index('item-repeat')]">

在本例中，index('item-repeat') 函式將始終設定為所選行。因此，當您位於第二行時，index('item-repeat') 將被設定為 2，XPath 表示式將為 instance('save-data')//item[2]

以下是完整的原始碼

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Summary-Inspector Pattern</title>
        <xf:model>
            <!-- The top part of the form shows a summary row for each record.  The bottom has details for each row.  -->
            <xf:instance id="save-data">
                <items xmlns="">
                    <item>
                        <name>Table Name 1</name>
                        <description>Table Description 1</description>
                    </item>
                    <item>
                        <name>Table Table Name 2</name>
                        <description>Table Description 2</description>
                    </item>
                    <item>
                        <name>Table Name 3</name>
                        <description>Table Description 3</description>
                    </item>
                    <item>
                        <name>Table Name 4</name>
                        <description>Table Description 4</description>
                    </item>
                </items>
            </xf:instance>
            
            <xf:instance id="template">
                <item xmlns="">
                    <name></name>
                    <description></description>
                </item>
            </xf:instance>
           
            
        </xf:model>
        
    </head>
    <body>
        <h1>Summary-Inspector Pattern</h1>
        
        <xf:repeat id="item-repeat" nodeset="instance('save-data')//item">
            <xf:input ref="name"></xf:input>
            <xf:input ref="description"></xf:input>
            <xf:trigger>
                <xf:label>X</xf:label>
                <xf:delete ev:event="DOMActivate" nodeset="."/>
            </xf:trigger>
        </xf:repeat>
        
        <xf:trigger>
            <xf:label>Add</xf:label>
            <xf:insert ev:event="DOMActivate" nodeset="instance('save-data')/items" origin="instance('template')" at="last()" position="after"/>
        </xf:trigger>
        
        <xf:group ref="instance('save-data')//item[index('item-repeat')]">
            <fieldset>
                <legend>Item inspector</legend>
                <xf:input ref="name">
                    <xf:label>Name: </xf:label>
                </xf:input>
                <xf:input ref="description">
                    <xf:label>Description: </xf:label>
                </xf:input>
            </fieldset>
        </xf:group>
    </body>
</html>

討論

請注意，此模式可以擴充套件為使用多行表格和表單上半部分的滾動 div。