如何使一个字形图标在按钮上可点击

Question

在我的本地 Notes 开发中，我有一个按钮，我在该按钮上定义了来自资源的图标。然后在有一个onclick事件。想要使它成为一个带有 onclick 的 bootstrap 按钮，所以我向它添加了一个 link 动作来执行该动作。如果我向按钮中显示的 link 添加文本，那么当我单击该文本时，操作就会发生，但我只想要字形图标并使其成为按钮的可点击部分

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" >
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

如果我更改它并将文本添加到 link 它会起作用，但只有当我单击文本时才有效：

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" text="Expand">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

如果我必须添加文本，那么图标就没有必要了。

有没有办法将字形图标添加到 link 以使图标可点击或 ????

Answer 1

有一个 xp:span 组件，应该允许您向其添加事件处理程序。也许如果你使用它和 xp:text 而不是 xp:link，它会达到你想要的效果。

Answer 2

您可以将 Glyphicon 添加到 xp:button。尝试这样的事情：

<xp:button value="Expand" id="button1" styleClass="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="thisValue">
        <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

如何使一个字形图标在按钮上可点击

How to make a glyphicon clickable on a button

clickable-image

clickable

xpages

glyphicons