連絡先管理アプリケーションを作っているときに'クリックしているページによってnavberのタブに色を付け足いな'と考えたので、そのときの実装を解説します。
1. 実際の画面
クリックしたページによって各タブがアクティブになっていることが確認できます。
Dashboradをクリック時
All Contactsをクリック時
各連絡先をクリックした時
2. 実装の解説
流れとしては次のとおり。
- 現在のページのuriを取得
- classにactiveを設定
- bootstrap3の使用によりアクティブなメニューの色が変わる
というようになっています。
まずはnavbar.html.slim（manageContact/app/views/layouts/navbar.html.slim）のコードを解説。
--< 省略 >--
ul.nav.navbar-nav
li class="#{active_item('dashboard')}"
= link_to 'Dashboard',dashboard_path
li class="#{active_item('contacts')}"
=link_to 'All Contacts',contacts_path
--< 省略 >--
該当するページによってactive_itemメソッドを実行させています。
次にactive_itemのメソッドについて解説 ファイルはapplication_helper.rb（manageContact/app/helpers/application_helper.rb）
--< 省略 >--
def active_item(uri)
uri_segment = request.fullpath.split(/\/|\?/)
uri_segment[1] === uri ? 'active' : ''
end
--< 省略 >--
ここで注目したい点は2つ。
- request.fullpath
request.fullpathは次に遷移したいurlを示している。urlによって次のように取得できます。
"/dashboard" "/contacts" "/contacts/99/edit"
そして取得した値をsplitすることでurlが単語単位で分割された配列を取得できます。
["", "dashboard"] ["", "contacts"] ["", "contacts", "99", "edit"]