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
-, ,

執筆者:

関連記事

RailsでECサイト構築4 確認メールを送る~spree

  spreeでは注文したときと発送したときにメールを送信できるように設定できるので、やってみた   目次1 設定2 翻訳 設定 管理画面から設定>メールシステムの設定から これで …

no image

位置情報通知の使いみちアイデアメモ

    ここまでHTML5とGoogle Mapsを使った位置情報通知を試してきたけど、その使いみちについてメモしておきたい 目次1 カレログ的なサービス2 宝探し的なイベント3 …

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …

Railsでhtmlファイルやリンク先のスクリーンショットを撮影~IMGKit&wkhtmltoimage

  github.com/csquared/IMGKit 目次1 環境2 wkhtmltoimageのインストール3 imgkitのインストール4 試す5 日本語フォント 環境 ubuntu …

RailsのフォームにjQuery UIのSliderを使う

By: woodleywonderworks – CC BY 2.0 目次1 jQuery UI Slider2 ライブラリを読み込む3 コード4 できた jQuery UI Slider …