jQuery UI Railsでの製作Tips

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

投稿日:

jQuery UI Slider

slider
数値を選ぶ際に、視覚的にもわかりやすいし、ドラッグやワンクリックで選びたい数値を選ぶことができて便利.

ライブラリを読み込む

jquery-ui-railsなどを使い、application.jsなどで読み込んでおく.

コード

view

仕組みとしては、hidden_fieldを使い、slider用のdivは別に作る.
また数値表示用の箇所も用意しておく.
ケースによって、document.readyにする.

css

なにかマージンがリセットされるぽい.あと、display: inline-blockを使えばinlineでsliderを表示できる.その場合、widthを指定する必要がある.

できた

気が向いたらヘルパーにしよう.
screenshot

-jQuery UI, Railsでの製作Tips
-,

執筆者:

関連記事

ActiveRecord4での集計をいろいろまとめた

By: MIKI Yoshihito – CC BY 2.0 目次1 集計の仕方いろいろ2 GROUP BYでグループ分け〜group3 グループ分け結果を操作する4 年月日ごとにグループ …

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

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

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

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list

no image

jQuery uiで作った将棋をHerokuにアップ

mysterious-depths-3658.herokuapp.com/ ここのひな形を利用させてもらいました docs.komagata.org/4571 使い方は、 [crayon-59e627 …