javascript - xPages 重复控件 onmouseover

Question

我有一个包含简单复选框和计算字段(并不重要)的重复控件，如下所示:
[ ] 文本1
[x] 文本 2
[]文本3
[x] 文本 4
[x] 文本 5


当您将鼠标指针悬停在当前项目/行上时，我想在其旁边显示额外的可点击图标
[ ] 文本1
(*) [x] 文本 2
[]文本3
[x] 文本 4
[x] 文本 5


这可能吗？谢谢

附言无论鼠标光标在哪里(复选框或文本字段)，我都需要显示该图标。我想为当前行显示它(当鼠标光标位于当前行中的某处时)

Answer 1

这可以通过一个简单的 CSS 技巧来实现。以下面的重复控件为例:

<xp:table>
    <xp:tr>
        <xp:td></xp:td>
        <xp:td>
            <xp:label
                value="Some Header"
                id="label1">
            </xp:label>
        </xp:td>
    </xp:tr>
    <xp:repeat
        id="repeat1"
        rows="30"
        var="textValue"
        indexVar="index">
        <xp:this.value><![CDATA[#{javascript:["text1", "text2", "text3", "text4", "text5"] }]]></xp:this.value>
        <xp:tr
            styleClass="magicRow">
            <xp:td>
                <xp:button
                    value="x"
                    id="button1"
                    styleClass="magicButton">
                </xp:button>
            </xp:td>
            <xp:td>
                <xp:checkBox
                    text=""
                    id="checkBox1">
                </xp:checkBox>
                <xp:text
                    escape="true"
                    id="computedField1"
                    value="#{textValue}">
                </xp:text>
            </xp:td>
        </xp:tr>
    </xp:repeat>
</xp:table>

我们在表格中使用了重复控件，因此它将行元素重复 5 次。现在我们将使用以下 CSS 来隐藏魔术按钮并仅在鼠标指针悬停在该行上时显示它:

tr.magicRow .magicButton { visibility:hidden; } 
tr.magicRow:hover .magicButton { visibility:visible; }

:hover 是一个有用的 CSS selector .