如何使按钮上的字形图标可点击答案

【问题标题】：How to make a glyphicon clickable on a button如何使按钮上的字形图标可点击
【发布时间】：2015-07-29 15:09:30
【问题描述】：

在我的原生 Notes 开发中，我有一个按钮，我在该按钮上定义了资源中的图标。然后在有一个onclick事件。想让它成为一个带有 onclick 的引导按钮，所以我向它添加了一个执行该操作的链接操作。如果我将文本添加到按钮中显示的链接，那么当我单击文本时会发生操作，但我只想要字形图标并将其设置为按钮的可点击部分

<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>

如果我更改它并将文本添加到链接中，它会起作用，但前提是我点击文本：

<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>

如果我必须添加文本，那么图标是不必要的。

有没有办法在链接中添加字形图标以使图标可点击或????

【问题讨论】：

标签： xpages clickable glyphicons clickable-image

【解决方案1】：

您可以将 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>

【讨论】：

做得很完美。我删除了按钮 value="Expand"，现在我只有图标，它是可点击的。再次感谢！

【解决方案2】：

有一个 xp:span 组件，它应该允许您向它添加一个 eventHandler。也许如果你使用它和一个 xp:text 而不是一个 xp:link，它会实现你想要的。

【讨论】：

当我正在处理这个问题时，我可以向 xp:link 添加一个图标，这正是我想要的，但是当你选择一个图标时，它看不到如何添加一个字形图标看来它只能是资源中的图像。我有一个可行的图像，但想使用一个字形图标。
术语“glyphicon”用词不当。我认为它就像 Wingdings，它是一种字体，对于每个“字母”，像素的配置会生成图像而不是字母（毕竟，数字字母与图像仅不同，因为我们称这些特定的像素配置“字母”）。