jquery.cookie.js로 간편하게 문자 크기 전환

jquery.cookie.js를 사용하면 매우 쉽게 javascript로 쿠키를 처리 할 수 ​​있습니다.
$.cookie('保存名', 値) 그냥 유지할 수 있고 $.cookie('保存名') 그냥 얻을 수 있습니다. 음, 너무 편리합니다.

이 기사에서는 Rails 프로젝트에서 jquery.cookie.js를 사용하여 문자 크기를 자유롭게 전환하는 방법을 메모로 남깁니다. 하고 싶은 것은 자유롭게 문자의 사이즈를 바꿀 수 있어, 페이지 천이나 리로드시에도 선택중의 문자 사이즈의 설정을 계승하도록 하고 싶다.

jquery-cookie.js 소스를 복제

# Rails.rootで
git clone https://github.com/carhartl/jquery-cookie

jquery.cookie.js를/vendor 아래에 설치

cp jquery-cookie/src/jquery.cookie.js vendor/assets/javascripts/
# コピーしたら他は必要ないので消しちゃってOK
rm -rf jquery-cookie

application.js에 정의

app/assets/javascripts/application.js

//= require jquery.cookie
//= require_tree .
//= require font_change

처리

app/views/layouts/_header.html.slim

.navbar-text
  | 文字サイズ  
  = link_to '小', '#', class: 'btn btn-default font-change', id: 'fontS'
  |  
  = link_to '中', '#', class: 'btn btn-default font-change', id: 'fontM'
  |  
  = link_to '大', '#', class: 'btn btn-default font-change', id: 'fontL'

app/assets/javascripts/font_change.js.coffee

 $ ->
  # フォントサイズ適用
  history = $.cookie('fontSize')
  elm_body = $('.wrapper') # bodyタグの上にwrapperクラスを追加しておく
  if history
    elm_body.addClass(history)
    $("##{history}").addClass('active') # bootstrapのactiveクラスを追加

  # フォントサイズ変更
  $('.font-change').click ->
    history = $.cookie('fontSize')
    set_font_size = $(this).attr('id')
    $("##{history}").removeClass('active')
    $(this).addClass('active')
    if history
      elm_body.removeClass(history).addClass(set_font_size)
    else
      elm_body.addClass(set_font_size)
    $.cookie('fontSize', set_font_size)

app/assets/stylesheets/hoge.css.scss

.fontS {
  font-size: 14px !important;
}

.fontM {
  font-size: 16px !important;
}

.fontL {
  font-size: 18px !important;
}