2012年2月27日月曜日

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="accordion">
  <h3><a href="#">お知らせ</a></h3>
  <div>
    本日のお知らせ
  </div>
  <h3><a href="#">TODO</a></h3>
  <div>
    TO DOリスト
  </div>
  <h3><a href="#">ブックマーク</a></h3>
  <div>
    お気に入りリスト
  </div>
</div>
<script type="text/javascript">
  $(function(){
    $("#accordion").accordion();
  });
</script>
出力画面

動作環境
grails 2.0.1

0 件のコメント:

コメントを投稿