2012年3月6日火曜日

grailsとhighlightで指定の文字列をハイライト表示する

grailsとhighlightで指定の文字列をハイライト表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // highlightのモジュールを宣言
    highlight {
        dependsOn 'jquery'
        resource url: 'js/jquery.highlight-3.js'
    }
}
jquery.highlight-3.jsはweb-app/jsに配置します。

2. main.cssなどのCSSに以下を追加します。
/* highlightの色 */
.highlight { background-color: orange; }
3. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
<!-- highlightを使用 -->
<r:require module="highlight"/>
        <r:layoutResources />
 </head>
4. viewに以下のようなコードを追加します。
<!-- highlight pluginを使用してハイライト表示 -->
<div id="highlight">
Grails - a Groovy-based web framework inspired by Ruby on Rails.
</div>
<script type="text/javascript">
  $(function(){
    $("#highlight").highlight('Groovy');
  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
highlight pluginのホームページ
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

0 件のコメント:

コメントを投稿