FontAwesome with Grails

时间:2013-07-15 19:35:17

标签: grails twitter-bootstrap font-awesome glyphicons

我一直在尝试为我的保存,删除等按钮添加图标。我有大约五个按钮使用<g:actionSubmit>标签来调用控制器中的动作来执行相应的功能。我的问题是FontAwesome和bootstrap的glyphicons需要使用<i class="icon-***">标签,如下所示:

<a href="http://google.com">
    <i class="icon-ok"></i> Google
</a>

在grails中,初始标记之间的标记格式是不可能的(至少使用actionSubmit)。 value属性是显示的字符串。这有什么工作吗?请记住,我仍然需要将按钮操作映射回控制器,这就是为什么我使用直接<button>标签时遇到问题,就像推荐用于引导程序一样。

更新

使用当前的2个答案我遇到了很多问题。它们都用于添加图标,但是我遇到了一些麻烦,我不得不修复很多东西。我想到了另一个解决方案但是在实现它时遇到了一些问题。我想使用taglib的base作为下面的actionSubmit标记lib来编写自己的标记lib:

def actionSubmit = {attrs ->
    attrs.tagName = "actionSubmit"
    if (!attrs.value) {
        throwTagError("Tag [$attrs.tagName] is missing required attribute [value]")
    }

    // add action and value
    def value = attrs.remove('value')
    def action = attrs.action ? attrs.remove('action') : value

    out << "<input type=\"submit\" name=\"_action_${action}\" value=\"${value}\" "

    // process remaining attributes
    outputAttributes(attrs)

    // close tag
    out << '/>'
}

我需要做的唯一改变就是让它能够接受

<i class="icon-ok"></i>

之间的标签:

<g:actionSubmit ...> </g:actionSubmit>

有人有建议或实施此建议吗?

2 个答案:

答案 0 :(得分:4)

不要使用actionSubmit,只需使用<button>并提供链接/操作属性,如下所示:

<button type="submit" class="btn">
  <i class="..."></i> Update
</button>

这是一个更详细的例子

<button type="submit" class="btn btn-danger" name="_action_delete" value="Delete">
  <i class="..."></i> ${message(code: 'default.button.delete.label', default: 'Delete')}   
</button>

注意:actionSubmit传递以下输入名称/值以进行更新,保存和删除

name="_action_update" //update
name="_action_update" //save
name="_action_delete" //delete

所以如果你的应用依赖于它们,你只需要做同样的事情

答案 1 :(得分:2)

尝试将类名传递给remoteLink,它创建一个使用Ajax来调用远程函数的链接,并且可以将fontAwesome类添加到它。

<g:remoteLink  class="btn icon-ok" action="index"  >
    click (without i tag)
</g:remoteLink>

<g:remoteLink  action="index" >
       <i class="btn icon-ok">click (with i tag) </i>
</g:remoteLink>

两种方法都应该有效。 enter image description here