grailsとjtickerを使用してタイプライター風に文字列をアニメーション表示する

grailsとjtickerを使用してタイプライター風に文字列をアニメーション表示するには、以下の手順を実行します。

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

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

jquery.jticker.jsはweb-app/jsに配置します。

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

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

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

<!-- jtickerを使用してタイプライター風に文字列をアニメーション表示 -->
<div id="ticker">
  <div>
    <h3>Groovy...</h3>
    <p>- is an agile and dynamic language for the Java Virtual Machine</p>
    <p>- builds upon the strengths of Java but has additional power features inspired by languages like Python, Ruby and Smalltalk</p>
    <p>- makes modern programming features available to Java developers with almost-zero learning curve</p>
  </div>
</div>
<script type="text/javascript">
  $(function(){
    $("#ticker").ticker({
      cursorList: " ",
      rate: 10,
      delay: 10000
    }).trigger("play").trigger("stop");
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
jtickerのホームページ
http://webdev.stephband.info/jticker/