Skip to content

E
Ecsite
Commit c423ab94 authored by shoei.kanno's avatar shoei.kanno
Browse files
Options

Merge branch '商品一覧画面ルーティング' into 'master' 

一覧画面モーダルの実装まで完了

See merge request !32
parents fa37214b 55ab7aee
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 29 deletions
src/main/java/com/example/service/ShoesService.java
View file @ c423ab94
......@@ -16,11 +16,12 @@ public class ShoesService {
ShoesRepository shoesRepository;
public List<Shoes> findAll(){
List<Shoes> list = shoesRepository. findAll();
//並べ替え処理
Collections.sort(list, Collections.reverseOrder());
//並べ替えたものを返す。
return list;
// List<Shoes> list = shoesRepository. findAll();
// //並べ替え処理
// Collections.sort(list, Collections.reverseOrder());
// //並べ替えたものを返す。
// return list;
return shoesRepository.findAll();
}
public Shoes findOne(Integer id){
......
src/main/resources/static/css/style.css
View file @ c423ab94
......@@ -1932,3 +1932,15 @@ th, td {
cursor: pointer ;
color: #f00 ;
}
.details {
width: 150px;
height: 50px;
margin: 50px 0;
font-weight: bold;
font-size: small;
background-color: #1abc9c;
border-radius: 3px;
border:none;
color: #000;
}
\ No newline at end of file
src/main/resources/static/js/list.js
View file @ c423ab94
$(function(){
$("#modal-open").click(function(event){
$(".details").each(function() {
$(".details").click(function(event){
$('#showName').empty();
$('#showPrice').empty();
$('#showId').empty();
//以下デモ参照
//キーボード操作などにより、オーバーレイが多重起動するのを防止する
// $( this ).blur() ; //ボタンからフォーカスを外す
......@@ -20,14 +23,19 @@ $(function(){
//一覧画面から情報取得
let nameField = document.createElement("a");
let priceField = document.createElement("a");
let nameField = document.createElement("p");
let priceField = document.createElement("p");
let idField = document.createElement("input");
idField.setAttribute("type", "hidden");
let name = $(event.target.parentNode.children[1].textContent);
let price =$(event.target.parentNode.children[2].textContent);
let id =$(event.target.parentNode.children[3].value);
nameField.textContent = name.selector;
$('#showName').append(nameField);
priceField.textContent = price.selector;
$('#showPrice').append(priceField);
idField.value = id.selector;
$('#showId').append(idField);
//[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){
......@@ -41,9 +49,10 @@ $(function(){
} ) ;
} ) ;
} ) ;
});
//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer ) ;
......@@ -69,3 +78,28 @@ $(function(){
} ) ;
//モーダル表示
//let details = document.getElementsByClassName("js-modal-open");
//$(".js-modal-open").each(function() {
// $(".js-modal-open").on("click", function(){
// $('.js-modal').fadeIn();
// return false;
// });
// $(".js-modal-close").on("click", function(){
// $('.js-modal').fadeIn();
// return false;
// });
//});
//モーダル内情報表示
//モーダルフォーム送信
//$('#ok-btn').on('click', function(){
//
//});
src/main/resources/templates/list.html
View file @ c423ab94
......@@ -16,6 +16,7 @@
<![endif]-->
</head>
<body>
<!-- モーダル中身 -->
<div id="modal-content">
<div id="modal-content-innar">
......@@ -23,12 +24,13 @@
<img class="shoeImage" alt="productImage"/>
<div id="showName"></div>
<div id="showPrice"></div>
<div id="showId"></div>
<p><a id="modal-close" class="button-link">閉じる</a></p>
<button type="button" class="cartBtn">cartへ入れる</button>
</div>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- モーダルウィンドウのコンテンツ終了 -->
<section class="header-top-section">
<div class="container">
......@@ -92,24 +94,15 @@
<div id="listBox">
<!--each分でくりかえす(宮嶋)-->
<div class="productBox" th:each="shoe : ${shoes}">
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
<a th:text= "${shoe.name}" class="shoeName">AirMAX</a>
<a th:text = "${shoe.price}" class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
</div>
<!--デモ用のダミー-->
<div class="productBox" >
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
<a class="shoeName">AirMAX</a>
<a class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div th:each="shoesPhoto : ${shoesPhoto}">
<img class="shoeImage" th:src="@{upload/スニーカー1.jpg}" alt="productImage"/>
<p th:text= "${shoe.name}" class="shoeName">AirMAX</p>
<p th:text = "'&yen;' +${shoe.price}" class="shoePrice">￥10,000</p>
<input type="hidden" th:value="${shoe.id}"/>
<button type="button" id="modal-open" class="details">Datails</button>
<!-- <button class="js-modal-open" id="sign-up">Details</button>-->
</div>
</div>
</div>
<footer class="footer">
<div class="container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment