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

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

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

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

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

Pryの関係gemが最初からいろいろはいったjazz_fingersを試してみた

By: george ruiz – CC BY 2.0 目次1 jazz_fingersのインストール2 インストールされるGem3 Pry4 awesome_print5 hirb6 p …

Rubyのメソッドの引数について

By: Jared Tarbell – CC BY 2.0 目次1 HackerRank2 メソッドの引数3 デフォルト値4 *をつけた可変長引数(rest引数)5 キーワード引数6 ** …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …