jQuery jQuery UI RailsでTwitterBootstrap Railsで使えるGem

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

投稿日:

2013-02-02_01h41_34

なにかいつの間にかかっこいい感じのサイトになってた

addyosmani.github.com/jquery-ui-bootstrap/

jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/

現在バージョンは0.51.0a

作者は最近愛読してるBackbone Fundamentalsの著者でもあるaddy osmaniさん

もちろんgemにもjquery-ui-bootstrap-railsっていうのがあるんだけど、残念ながらまだjQueryUIの1.8系にまでしか対応してなかった

github.com/kristianmandrup/jquery-ui-bootstrap-rails

まあ、いつものようにブランチして最新版に取り替えればなんとかなるんじゃないかと思ってやってみた

記事を書いている間にjQuery UI Railsが1.9から1.10に変わってたのでタイトルも変わった(・・;)

準備

Gemfile

まず、jQuery UI BootstrapはjQuery UI と Twitter Bootstrapが必要

ということで

github.com/joliss/jquery-ui-rails

github.com/thomas-mcdonald/bootstrap-sass

bootstrapのバージョン指定は4つ指定しないと多分壊れるとのこと

bundle

application.js

 

base.css.scssをつくる

*結論的にこのBootstrapのCSSは使わず、カスタムしたバージョンを使うことになったので、BootstrapのJavascriptであればなんでもいいってことに

 

インストール

Gemfile

github.com/seventhsense/jquery-ui-bootstrap-rails/tree/development

またオレオレブランチ

改変点は

  • テーマを1.10.0対応に
  • 画像も最新のテーマから取り直した(なにか圧縮してサイズを小さくした?)
  • 公式のカスタマイズされたブートストラップも同梱
  • cssのイメージへのアドレスをアセットパイプラインにあわせるためのしょぼいスクリプトを追加

 

application.css

 

検証

デモ画面を再現できるかどうかやってみた

ルートもmain#indexに変更

index.html.erbにデモ画面のBodyを貼付け

2013-02-02_02h05_21

 

次にデモ用のファイルを設定する

docs.js

demo.js

docs.css

を本家のリポジトリからもってくるとだいぶ良い感じがでてくる

2013-02-02_02h21_32

カスタムブートストラップ

なんか狭いのはデフォルトのbootstrapがwidth920に対して、デモ画面はwidth1200でデザインしてるから

とりあえずオレオレブランチに公式のカスタムブートストラップも同梱しておいた

その他に横のナビの高さもうまく調整してあるぽい

application.cssに次の指定でカスタムブートストラップを読み込めるようにした

被るのでbase.css.scssのインポートは削除しておく

 

2013-02-02_03h02_02

 

*buttonにcssが適用されないことが何度かあった

きっかけはわからないけど、適用されなかったら、まず、jQuery UI だけに戻してbuttonが適用されるか順番に試していくといいかもしれない

ついでにextraも

File input

application.js

application.css

2013-02-02_03h12_48

Font Awesome

Gemfile

application.css

base.css.scss

 

2013-02-02_03h18_20

 

*wijmoっていうのはうまく動かなかった

 

 

 

-jQuery, jQuery UI, RailsでTwitterBootstrap, Railsで使えるGem
-

執筆者:

関連記事

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

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …

simple_formからdatepickerを使うには~ui_datepicker-rails3

  github.com/kristianmandrup/ui_datepicker-rails3 目次1 Gemfile2 js3 css4 initializer5  使う6 できた G …

no image

Rails3で動画配信を試用~flowplayer

  最近はYoutubeなど動画配信サイトも充実してきていて知人向けのプライベートな配信も可能なようだ しかし、やっぱりYoutubeにアップするのは抵抗があったり、LAN内だけで配信したい …