2012年2月20日月曜日

grailsとjquery-ui pluginでbuttonタグ、アンカー、submitボタンをボタン化する

grailsとjquery-ui pluginでbuttonタグ、アンカー、submitボタンをボタン化するには、以下の手順を実行します。

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>
  <button>テスト1</button>
  <a href="#" class="button">テスト2</a>
  <input type="submit" value="テスト3" class="button" />
</div>
<script type="text/javascript">
  $(function(){
    $("button").button();
    $("button").click(function(){
      alert("テスト1をクリックしました。");
    });
    $("a.button").button();
    $("a.button").click(function(){
      alert("テスト2をクリックしました。");
    });
    $("input.button").button();
    $("input.button").click(function(){
      alert("テスト3をクリックしました。");
    });
  });
</script>
出力イメージ

動作環境
grails 2.0.1

0 件のコメント:

コメントを投稿