Rails3.2でjQueryUIを使う為にやること/モーダルダイアログの使い方

Rails jQuery

モーダルダイアログが手軽に使えそうだったのでjQueryUIを試してみました。

インストール

jquery-ui-railsというgemを使いました。

Gemfile

group :assets do
  # 略
  gem 'jquery-ui-rails' # 追加
end

JS/CSS/Image

JS

app/assets/javascripts/application.js
に追加

//= require jquery-ui
CSS/Image

Themeは自分でとってきてねと読み取ったので公式サイトから取得

バージョンは1.8.23。jquery-ui-1.8.23.custom.zipというアーカイブを取得

追加するディレクトリは下記を参考に。とりあえず設定の追記が少なくて済む方法を選んだ

CSS
jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css
をapp/assets/stylesheetsにいれる。


Image
jquery-ui-1.8.23.custom/css/ui-lightness/images
の中身をapp/assets/images/imagesにいれる。

app/assets/images/images/*.pngってなる感じ


これで準備OK。images/imagesになっちゃうのがあれだからStackOverFlowでは議論されてんのかな。(英語読めよ

モーダルダイアログ

モーダルダイアログ簡単にできました。こんな感じ

<%= link_to 'ここ！', '#', class: 'open' %>
<div id="modal" style="display:none;">
  デアルカ
</div>

<script>
  $(function() {
    $('.open').click(function() {
      $('#modal').dialog({
        modal: true,
        title: 'モーダルダイアログ'
      });
    });
  });
</script>

こんなのが出るはず。