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のアプリをデプロイ~apache+passenger+postgresql

  環境 ubuntu server 12.04 目次1 postgresql2 apache+passenger3 デプロイ準備 postgresql インストール 参照 Ubuntu s …

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

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

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Mac OSXにHyper EstraierのRuby Bindingをインストールする

By: Kanko* – CC BY 2.0 目次1 環境2 Hyper Estraierのインストール3 ソースのダウンロード4 パッチを適用する5 rvmのためにconfigureファ …