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

執筆者:

関連記事

Rails5でAjax処理をActionCableを使ってリアルタイム同期化

By: Mike Johnston – CC BY 2.0 目次1 はじめに2 サンプル掲示板3 ActionCableでリアルタイム化4 チャンネルを購読して、ストリームで分配する5 c …

MiniTest::Unitにおけるネストしたテストケース

By: Elliott Brown – CC BY 2.0 目次1 How to2 実行結果 How to クラスを親子で書けばOK. そのときに継承とかも自由に使える. RSpecに慣れ …

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

jQuery UIで将棋を再現(まだ見た目だけ)

  何年か前にニコニコ動画でみた1時間でオセロをつくる動画をみた. なら将棋もできそうじゃね!?と思って1時間で区切ってやってみたら ゲームまではできなかった.自分がやったら丸2、3日は必要 …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …