ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina
Introduction of 1 gem 2 Load jquery.cookie.js 3 Edit view
Enables jquery to be used in Rails.
Gemfile
gem 'jquery-rails'
Terminal
$ bundle insatll
app/assets/javascripts/application.js
//=require jquery ← added
//= require jquery_ujs ← added
//= require activestorage
//= require turbolinks
//= require_tree .
Add the following to the head part and load jquery.cookie.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
#### **`erb:app/views/layouts/application.html.erb`**
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
← Add
```
# Edit view
This time it is completed with html.
erb:app/views/homes/top.html.erb
<div class="indication">
<div class="box">
<p>When you press the display end button below,<br>You cannot see it even if you update it.<br>
It will be displayed when you launch a new browser.
</p>
<button>End of display</button>
</div>
</div>
<style>
.indication{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.box{
position:absolute;
top:40%;
left:35%;
width:400px;
height:150px;
background-color: #ffffff;
z-index:2;
}
.box p{
padding:15px;
}
.box button{
display:block;
margin:0 auto;
}
</style>
<script>
$(function(){
$(".indication").show();
if($.cookie('Flg') == 'on'){
$(".indication").hide();
}else{
$(".indication").show();
}
$(".box button").click(function(){
$(".indication").fadeOut();
$.cookie('Flg', 'on', { expires: 1,path: '/' });
});
});
</script>
if($.cookie('Flg') == 'on')At
```on```If there is no description of, the indication class is displayed.
Also, when the button is clicked, the indication class is not displayed,
#### **`$.cookie('Flg', 'on'In the description of`**
```cookie('Flg', 'on'In the description of
Put the value of ‘on’ in the cookie and
#### **`{ expires: 1,path: '/' });In the description of`**
The cookie retention period is one day, and the target range is "/" to specify the entire site.
It may not be used that often, I think that it is effective for sites that you have to be careful about and sites that you want to register.
Also, on twitter, technologies and ideas that are not uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork
Recommended Posts