🦁
rails JavaScript使ってタブ切り替え
１．はじめに
今回はruby on rails のHTML/CSSを通して、タブのページ切り替えを行なっていきます。
今後もJavaScriptをデザインに適応させていくための糧にすることが今回のGoalです。
2. JavaScriptを導入する環境を作ります。
最初にVSCodeで自分のアプリケーションファイルを開きます。
app/views/layouts/application.html.erbを開きます。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Tweets</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
上記のコードの上に下記のコードをコピペします！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
これでJavaScriptを導入することができます！
これで事前準備は完了です。
3. ここからは、HTML/CSSにコードを書いていくよ！
今回はTweetsコントローラーでアプリケーションを作成しています。
ちなみに投稿分類も起こっています。
コントローラーの記述は以下のようになっています。
app/controllers/tweets_controller.rb
class TweetsController < ApplicationController
def index
@tweets = Tweet.all
end
def new
@tweet = Tweet.new
end
def create
tweet = Tweet.new(tweet_params)
if tweet.save
redirect_to :action => "index"
else
redirect_to :action => "new"
end
end
private
def tweet_params
params.require(:tweet).permit(:body, :category)
end
end
4. HTMLを書いていきましょう。
app/views/tweets/index.html.erb
<body>
<div class="wrapper">
<ul class="tab">
<li><a href="#dog">イヌ</a></li>
<li><a href="#cat">ネコ</a></li>
<li><a href="#bear">クマ</a></li>
</ul>
<div id="dog" class="area">
<h2>イヌ</h2>
<ul>
<% @tweets.each do |t| %>
<% if t.category == "イヌ" %>
<div class="tweet">
<li><%= t.body %><br><%= t.created_at %></li>
</div>
<% end %>
<% end %>
</ul>
</div>
<div id="cat" class="area">
<h2>ネコ</h2>
<ul>
<% @tweets.each do |t| %>
<% if t.category == "ネコ" %>
<div class="tweet">
<li><%= t.body %><br><%= t.created_at %></li>
</div>
<% end %>
<% end %>
</ul>
</div>
<div id="bear" class="area">
<h2>クマ</h2>
<ul>
<% @tweets.each do |t| %>
<% if t.category == "クマ" %>
<div class="tweet">
<li><%= t.body %><br><%= t.created_at %></li>
</div>
<% end %>
<% end %>
</ul>
</div>
</div>
</body>
5. CSSを記述していきます。
app/assets/stylesheets/application.scss
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
.tab {
display: flex;
flex-wrap: wrap;
}
.tab li a {
display: block;
background:#ddd;
margin:0 2px;
padding:10px 20px;
}
.tab li.active a {
background:#fff;
}
.area {
display: none;
opacity: 0;
background: #fff;
padding:50px 20px;
}
.area.is-active {
display: block;
animation-name: displayAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
background:#eee;
}
ul {
list-style:none;
}
a {
color:#333;
text-decoration: none;
}
.wrapper {
width:100%;
max-width: 960px;
margin:30px auto;
background:#fefefe;
}
.area h2 {
font-size:1.3rem;
margin:0 0 20px 10px;
}
.area li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
6. ここからはJavaScriptを記述していくよ！
JavaScriptはJavaScriptファイルの中に書き込むのではなく、
HTMLファイルに書き込んでいきます！
<script></script>の中に書き込みます！
app/views/tweets/index.html.erb
#割愛
#追加箇所
<script>
function GethashID (hashIDName){
if(hashIDName){
$('.tab li').find('a').each(function() {
var idName = $(this).attr('href');
if(idName == hashIDName){
var parentElm = $(this).parent();
$('.tab li').removeClass("active");
$(parentElm).addClass("active");
$(".area").removeClass("is-active");
$(hashIDName).addClass("is-active");
}
});
}
}
$('.tab a').on('click', function() {
var idName = $(this).attr('href');
GethashID (idName);
return false;
});
$(window).on('load', function () {
$('.tab li:first-of-type').addClass("active");
$('.area:first-of-type').addClass("is-active");
var hashName = location.hash;
GethashID (hashName);
});
</script>
#ここまで
ここまで記述ができていれば下記の画像のように表示されていると思います！
7．これで以上です！
みなさんここまでお疲れ様でした！
これからJavaScriptを使ってより良いwebサイトを作っていってください！！！！！
Discussion