Question

我有一个包含简单checkBox和计算字段的重复控件（并不重要），如下所示： [ ] text1 [x] text2 [ ] text3 [x] text4 [x] text5

当您将鼠标指针悬停在当前项目/行上时，我想在其旁边显示其他可点击图标 [ ] text1 (*) [x] text2 [ ] text3 [x] text4 [x] text5

这可能吗？感谢

P.S。无论鼠标光标在哪里（复选框或文本字段），我都需要显示该图标。我想为当前行显示它（当鼠标光标在当前行中的某个位置时）

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>

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

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

:hover是有用的CSS selector。

Answer 2

我确信这是可能的。我没有一个方便的代码示例，因为我不熟悉Client Side JavaScript，但我不得不认为你可以使用dojo或jQuery将事件附加到悬停或甚至“onmouseout”的事件中您可以使用dojo / jquery向您的按钮添加/删除css。

xPages重复控制onmouseover

2 个答案: