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
-,

執筆者:

関連記事

no image

Rails3.2.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

  jQuery UIのプラグインdynatreeをRailsで使ってみた github.com/glebtv/dynatree-rails wwwendt.de/tech/dynatree …

simple_formからdatepickerを使うには~ui_datepicker-rails3

  github.com/kristianmandrup/ui_datepicker-rails3 目次1 Gemfile2 js3 css4 initializer5  使う6 できた G …

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

no image

MongoidでMapReduceに挑戦中

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