jQuery UI Railsで使えるGem

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

投稿日:

 

前回

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

 

フォルダの開け閉じを機能させる

前回までフォルダの開き閉じはできるようになったけど、閉じるときにその子ノードを削除していたので、
親を選択してから子ノードを選択すると、その子ノードまで選択されてしまうというバグがあった

autoCollapse

自動で開く閉じるをやってくれるオプション.
うまく機能したけど、あとからノードを足した場合はダメっぽい.

ので、autoCollapseは設定したうえで、さらに子ノードを追加したときに開くオプションをつけた.

expand:true

ノードをつくったとき初期状態で開いておくオプション.これも子ノードを追加したときには機能してない?
たぶんつくった子ノード自身を開くオプションで今回は子ノードをくっつけて、親ノード自身を開きたいので違う

LazyRead

ajaxを通信を想定してるんだけどうまく機能しなかった

 

コード

たぶん使い方としては、前についている+ボタンでフォルダの開閉をすることを想定してるぽい

結局、子ノードをつくるときに、すでにある子ノードは足さない方針にした

ちょっと冗長だけど

 

フォルダを追加するボタンをつくる

ダイアログフォームを設定する

次にjQuery UIのダイアログを利用してフォルダを追加するフォームをつくる

計画としてはこんな感じ

  1. index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る
  2. new.jsでフォームダイアログを出現させる
  3. create.jsにいってダイアログを閉じる

index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る

まず、remoteオプションをtrueにするとRailsはhtmlテンプレートじゃなくて、jsテンプレートを読みにいってくれる
ついでに、jQuery UIのButtonをつかって軽くリンクを装飾する

コントローラーにjsフォーマットを追加

app/assets/javascripts/folders.js.coffee

ボタン装飾をつける

new.jsでフォームダイアログを出現させる

jQueryでどこかにdiv要素をつくって、そこをダイアログにする

index.html.erb

app/views/folders/new.js.coffee

それっぽい

create.jsにいってダイアログを閉じる

まず、formのsubmitもjs通信にする

_form.html.erb

rermoteオプションをtrueにするだけ

コントローラーにjsフォーマットを追加

app/views/folders/create.js.coffee

ダイアログを閉じる

 

jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技

 

あとはドラッグアンドドロップと右クリックメニューをやりたい

-jQuery UI, Railsで使えるGem
-, ,

執筆者:

関連記事

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …