Question

我一直在尝试为我的XPage应用程序采用Twitter Bootstrap。到目前为止，我主要尝试使用CSS。

我真正喜欢的一件事是使用以下语法装饰按钮的简单方法（即将图标添加到按钮）：

<button class="btn" type="button"><i class="icon-ok"></i> Approve</button>

使用标记内的<button>标记添加装饰。这就是问题所在。使用按钮核心控件时，标记需要进入value属性。当然，这不起作用。

我可以通过修改CSS来解决这个问题，但这不是我想要追求的过程。

解决方案是在呈现按钮控件后“注入”标记。我没有成功使用服务器端脚本，但我设法用Dojo做到了，像这样：

<xp:button id="button1" styleClass="btn" value="Approve">
</xp:button>

<script type="text/javascript">
  var decorate = function() {
    e = dojo.query("[id$='button1']")[0];
    e.innerHTML = '<i class="icon-ok"></i> Aprove';
  }    

  dojo.addOnLoad(decorate);
</script>

有没有更好的方法呢？有dojo.addOnLoad的替代方案吗？这可以通过SSJS实现吗？

Answer 1

您可以在按钮内添加passthrough标记：

<xp:button styleClass="btn" value="BUTTON">
   <i class="icon-ok"></i>
</xp:button>

生成的HTML将如下所示：

<button class="btn" type="button" name="view:_id1:_id2"><i class="icon-ok"></i>BUTTON</button>

修改

如果您想使用其他HTML元素并在其中添加内容， xp：panel 可以提供帮助：

<xp:panel styleClass="btn" tagName="a"> ...OTHER INTERESTING THINGS INSIDE... </xp:panel>

这是生成的HTML代码：

<a class="btn"> ...OTHER INTERESTING THINGS INSIDE...</a>

Answer 2

您真的需要使用按钮吗？如果你愿意，这里有一个替代方案，尝试使用锚点像这样<a href='#' class='btn'> Approve </a>

如何将Bootstrap图标添加到XPage按钮或链接核心控件？

2 个答案: