1

我一直在尝试为我的 XPages 应用程序采用 Twitter Bootstrap。到目前为止，我主要是用 CSS 做实验。

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

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

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

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

<i>解决方案是在呈现按钮控件后“注入”标签。我在服务器端脚本上没有成功，但我设法用 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实现吗？

4

2 回答 2

4

您可以在按钮内添加您的直通标签：

<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">
   <i class="icon-ok"></i>
   ...OTHER INTERESTING THINGS INSIDE...
</xp:panel>

这是生成的 HTML 代码：

<a class="btn">
   <i class="icon-ok"></i>...OTHER INTERESTING THINGS INSIDE...</a>
于 2013-04-27T13:30:41.000 回答
0

你真的需要使用按钮吗？如果你愿意，这里是另一种选择，尝试使用这样的锚<a href='#' class='btn'><i class='icon-ok'></i> Approve </a>

于 2013-04-27T02:42:06.837 回答