grailsとgrumble.jsで丸いふきだしを表示する

grailsとgrumble.jsで丸いふきだしを表示するには、以下の手順を実行します。

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

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

jquery.grumble.min.jsはweb-app/jsに、grumble.min.cssはweb-app/cssに
bubble-sprite.pngはweb-app/imagesに配置します。

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

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

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

<!-- grumbleを使用して丸い吹き出しを表示する -->
<span id="grumble">
grumble.jsのサンプル
</span>
<script type="text/javascript">
  $(function(){
    $('#grumble').grumble({
      text: 'こんにちは!', 
      angle: 75, 
      distance: 80, 
      showAfter: 100 
    });
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
grumble.jsのホームページ
http://jamescryer.github.com/grumble.js/