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+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

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

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

jQuery UI BootstrapにGoogle Mapが来た〜gmap3

連続的な位置情報の取得とHerokuへのアップ~HTML5 Geolocation API

  目次1 連続的な位置情報の取得2 heroku3 結果 連続的な位置情報の取得 連続的な位置情報の取得はこんなかんじで書いてみた [crayon-5ce265ec069209387553 …

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …