grailsとjquery-ui pluginでタブを表示する

grailsとjquery-ui pluginでタブを表示するには、以下の手順を実行します。

1. pluginのインストール

grails install-plugin jquery-ui

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

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

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

<div id="tabs" style="overflow:hidden;">
  <ul>
    <li><a href="#tab1">基本設定</a></li>
    <li><a href="#tab2">詳細設定</a></li>
    <li><a href="#tab3">プレビュー</a></li>
  </ul>
  <div id="tab1">
    <p>基本設定画面</p>
  </div>
  <div id="tab2">
    詳細設定画面
  </div>
  <div id="tab3">
    プレビュー画面
  </div>
</div>
<script type="text/javascript">
  $(function(){
    $("#tabs").tabs();
  });
</script>

出力画面

動作環境
grails 2.0.1