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

Rails4とPostreSQL9.3で全文検索〜pg_bigm

目次1 準備2 migration3  使い方 準備 エクステンションを導入しておく Ubuntu Server12.04でPostgreSQL9.3をつかう〜pg_bigmで全文検索 migrati …

Rails5でtextareaをコードエディタにする〜Ace Editor

By: Mike Mozart – CC BY 2.0 目次1 Ace Editor2 Gemfile3 application.js4 View5 coffeescript6 できた A …

Railsでjavascriptやcoffeescriptをつかうとき便利かもしれないGem

By: Stan Dalone & Miran Rijavec – CC BY 2.0 目次1 oj2 gon3 js-routes4 rails-dev-tweaks oj gi …

no image

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-5c …

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …