javascript - 带有 RichFaces 和 Bootstrap 的完全可点击的 Ajax 按钮

Question

我正在尝试使用 Bootstrap 刷新字形图标创建一个完全可点击的 span 或 Button。使用我继承的代码，图标本身是可点击的，但图标和按钮边框之间的区域不是，也就是说，用户感觉好像点击按钮的边缘不起作用。

这是当前代码:

<span class="btn btn-default btn-xs" style="background-color: transparent;">
    <h:commandLink  id="refresh" style="height:25px">
        <span class="glyphicon glyphicon-refresh"></span>       
        <a4j:ajax render="richTable cnt_label scroller"
          execute="richTable cnt_label scroller" event="click" immediate="true"
          oncomplete="richTableRerenderCompleted('refresh')"/>
    </h:commandLink>
</span>

我尝试用 <button> 替换外部跨度这似乎可以解决问题，但它在刷新时以一种有趣的方式扭曲了表格。

直接使用 RichFaces commandButton 或 commandLink 会使一切变得更糟。

有什么想法吗？

Answer 1

由于图标只是一个字母，您可以创建一个按钮并将图标放在标签中。

如果您检查跨度，您应该会看到如下内容:

<span …>
    ::before
</span>

然后检查 ::before 的 CSS，您应该看到:

.glyphicon-refresh:before {
    content: "\e031";
}

e031 是字母的数量，你可以把它转换成一个 HTML 实体然后这样做:

<h:commandButton value="&#xe031;" styleClass="btn btn-default btn-xs glyphicon">