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

Rails3.2でajaxなフォルダツリーを導入する4~dynatree-rails & Drag’n’Drop

wwwendt.de/tech/dynatree/doc/dynatree-doc.html wwwendt.de/tech/dynatree/doc/samples.html 今日はドラッグアンドド …

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

Rails3.2でみたまま編集 〜hallo editor

  By: Fabio Marini – CC BY 2.0 文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit 文字をダブルクリックしてその …

jQuery UI Buttonsetの選択状態を変えたり、色を変えたり

  目次1 jQuery UI Buttonsの設定(Radioボタン)2 チェック状態を変えるには3 ボタンの色を変えるには4 チェックした要素のvalueを取得するには jQuery U …

no image

Rails3で動画配信を試用~flowplayer

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