完全可点击的ajax按钮与RichFaces和Bootstrap

Fully clickable Ajax-Button with RichFaces and Bootstrap

本文关键字：按钮 RichFaces Bootstrap ajax      更新时间：2023-09-26

我试图有一个完全可点击的跨度或按钮与引导刷新字形图标。在我继承的代码中，图标本身是可点击的，但图标和按钮边界之间的区域是不可点击的，也就是说，用户感觉好像点击按钮的边缘不起作用。

下面是当前代码:

<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>替换外span，这似乎奏效了，但它在刷新时以一种有趣的方式扭曲了表。

直接使用RichFaces命令按钮或commandLink使一切变得更糟。

任何想法?

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

如果你检查span，你应该看到这样的内容:

<span …>
    ::before
</span>

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

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

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

<h:commandButton value="&#xe031;" styleClass="btn btn-default btn-xs glyphicon">
相关文章：