RailsでTwitterBootstrap Railsで使えるGem

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

投稿日:

github.com/amatsuda/kaminari

Gemfile & bundle

次のスクリプトが追加される

 

設置

kaminari_config.rb

設定しなくてもよいのだが確認のためconfigファイルを出す

デフォルトはこのような感じ

controllerの設定

viewの設定

テーマの作成

デフォルトテーマの準備

kaminariのbootstrap用テーマは既にあるけど、勉強をかねて自作

rails g kaminari:theme でいろいろわかるらしいけど今は404エラー

*いまは

でbootstrapテーマがいけます

ただし、このテーマはclassにdisableをつけるのではなくて、クリックできないリンクは表示しない仕様です

 

テーマの作成

app/views/kaminari/にできたデフォルトテーマを修正すればOK

やること

  • デフォルトテーマの構造はnav>span。これをブートストラップの構造div.pagination>li>aに直す
  • _page.htmlはlink_to_unlessを使っているが、このままだと現在ページにaタグがつかずにブートストラップのcssが適用されないので、現在ページにもダミーのaタグをつけて、liに.activeクラスをつける
  • デザイン的には「First」「Prev」は表示しないではなく.disableクラスをつけたほうがいいと思う

これでOKなはず

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

執筆者:

関連記事

Rubyで静的ページをジェネレート〜middleman

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで middlemanもそんな静的なページのメジャーなジェネレータの1つ middlemanの利点は次の …

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

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

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …

CarrierWaveで添付したファイルをrroongaで全文検索

By: Alan Levine – CC BY 2.0 目次1 Carrierwave2 rroonga3 Gemfile4 application.rb5 config/initiali …

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

By: Mauquoy Token Company – CC BY 2.0 railscasts.com/episodes/258-token-fields?language=ja&#03