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

執筆者:

関連記事

no image

jQuery UIの将棋でつくったまとめ~jQuery UI draggable droppable

  目次1 盤上の駒の動き2 盤上の駒の座標を取得する3 手番(ターン)の変更4 盤外からの駒の動き5 将棋のルールの分析6 ゲームの計算処理など 盤上の駒の動き draggableの設定 …

Redmine3でのテストあれこれ〜minitest

By: Pedro Ribeiro Simões – CC BY 2.0 目次1 RSpec or Minitest?2 Minitestの基本とか3 Redmine本体のユニットテストを …

Railsでプロパティと同名のメソッドを作る

By: Images Money – CC BY 2.0 例えば、Projectというモデルにname、contentというプロパティがあるとき、nameというメソッドを作って、ちょっと改 …

railsのpathヘルパーでスラッシュの代わりにピリオドになっちゃうのでrails consoleでいろいろ試した

By: Nicolas Raymond – CC BY 2.0 目次1 問題2 解決3 pathとurlのヘルパーのあれこれ 問題 次のような環境で [crayon-5ada69f35a1 …

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

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