grailsとbadgerで要素にバッジをつける

grailsとbadgerで要素にバッジをつけるには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // badgerのモジュールを宣言
    badger {
        dependsOn 'jquery'
        resource url: 'js/badger.min.js'
        resource url: 'css/badger.min.css'
    }
}

badger.min.jsはweb-app/jsに、badger.min.cssはweb-app/cssに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- badgerを使用 -->
<r:require module="badger"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- badger pluginを使用してバッジ表示 -->
<div id="entry" style="position:relative; border: 1px #505050 solid; padding:10px;">
badgerでバッジを表示します。
</div>
<script type="text/javascript">
  $(function(){
    $("#entry").badger('New!');
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
badgerのホームページ
http://thrivingkings.com/badger/