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
-

執筆者:

関連記事

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …

no image

Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard

環境 ruby 1.9.3 & rails 3.2.8 参考 cucumber + spork + guard + factory_girl あってもよいが[crayon-5b025222be …

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

目次1 参考2 前提の環境3 Gemfile4 View5 Controller6 できた7 パーシャル化8 フォームを追加する場所を指定する9 一対一の場合10 そのほか11 番外編: 1つのモデル …

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …