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 { ...@@ -16,11 +16,12 @@ public class ShoesService {
ShoesRepository shoesRepository; ShoesRepository shoesRepository;
public List<Shoes> findAll(){ public List<Shoes> findAll(){
List<Shoes> list = shoesRepository. findAll(); // List<Shoes> list = shoesRepository. findAll();
//並べ替え処理 // //並べ替え処理
Collections.sort(list, Collections.reverseOrder()); // Collections.sort(list, Collections.reverseOrder());
//並べ替えたものを返す。 // //並べ替えたものを返す。
return list; // return list;
return shoesRepository.findAll();
} }
public Shoes findOne(Integer id){ public Shoes findOne(Integer id){
......
src/main/resources/static/css/style.css
View file @ c423ab94
...@@ -1932,3 +1932,15 @@ th, td { ...@@ -1932,3 +1932,15 @@ th, td {
cursor: pointer ; cursor: pointer ;
color: #f00 ; 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(){ $(function(){
$("#modal-open").click(function(event){ $(".details").each(function() {
$(".details").click(function(event){
$('#showName').empty(); $('#showName').empty();
$('#showPrice').empty(); $('#showPrice').empty();
$('#showId').empty();
//以下デモ参照 //以下デモ参照
//キーボード操作などにより、オーバーレイが多重起動するのを防止する //キーボード操作などにより、オーバーレイが多重起動するのを防止する
// $( this ).blur() ; //ボタンからフォーカスを外す // $( this ).blur() ; //ボタンからフォーカスを外す
...@@ -20,14 +23,19 @@ $(function(){ ...@@ -20,14 +23,19 @@ $(function(){
//一覧画面から情報取得 //一覧画面から情報取得
let nameField = document.createElement("a"); let nameField = document.createElement("p");
let priceField = document.createElement("a"); let priceField = document.createElement("p");
let idField = document.createElement("input");
idField.setAttribute("type", "hidden");
let name = $(event.target.parentNode.children[1].textContent); let name = $(event.target.parentNode.children[1].textContent);
let price =$(event.target.parentNode.children[2].textContent); let price =$(event.target.parentNode.children[2].textContent);
let id =$(event.target.parentNode.children[3].value);
nameField.textContent = name.selector; nameField.textContent = name.selector;
$('#showName').append(nameField); $('#showName').append(nameField);
priceField.textContent = price.selector; priceField.textContent = price.selector;
$('#showPrice').append(priceField); $('#showPrice').append(priceField);
idField.value = id.selector;
$('#showId').append(idField);
//[#modal-overlay]、または[#modal-close]をクリックしたら… //[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){ $( "#modal-overlay,#modal-close" ).unbind().click( function(){
...@@ -41,9 +49,10 @@ $(function(){ ...@@ -41,9 +49,10 @@ $(function(){
} ) ; } ) ;
} ) ; } ) ;
} ) ; } ) ;
});
//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer ) ; $( window ).resize( centeringModalSyncer ) ;
...@@ -69,3 +78,28 @@ $(function(){ ...@@ -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 @@ ...@@ -16,6 +16,7 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<!-- モーダル中身 --> <!-- モーダル中身 -->
<div id="modal-content"> <div id="modal-content">
<div id="modal-content-innar"> <div id="modal-content-innar">
...@@ -23,12 +24,13 @@ ...@@ -23,12 +24,13 @@
<img class="shoeImage" alt="productImage"/> <img class="shoeImage" alt="productImage"/>
<div id="showName"></div> <div id="showName"></div>
<div id="showPrice"></div> <div id="showPrice"></div>
<div id="showId"></div>
<p><a id="modal-close" class="button-link">閉じる</a></p> <p><a id="modal-close" class="button-link">閉じる</a></p>
<button type="button" class="cartBtn">cartへ入れる</button> <button type="button" class="cartBtn">cartへ入れる</button>
</div> </div>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div> </div>
<!-- モーダルウィンドウのコンテンツ終了 -->
<section class="header-top-section"> <section class="header-top-section">
<div class="container"> <div class="container">
...@@ -92,24 +94,15 @@ ...@@ -92,24 +94,15 @@
<div id="listBox"> <div id="listBox">
<!--each分でくりかえす(宮嶋)--> <!--each分でくりかえす(宮嶋)-->
<div class="productBox" th:each="shoe : ${shoes}"> <div class="productBox" th:each="shoe : ${shoes}">
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/> <div th:each="shoesPhoto : ${shoesPhoto}">
<a th:text= "${shoe.name}" class="shoeName">AirMAX</a> <img class="shoeImage" th:src="@{upload/スニーカー1.jpg}" alt="productImage"/>
<a th:text = "${shoe.price}" class="shoePrice">￥10,000</a> <p th:text= "${shoe.name}" class="shoeName">AirMAX</p>
<button type="button" id="modal-open" class="button-link">詳細</button> <p th:text = "'&yen;' +${shoe.price}" class="shoePrice">￥10,000</p>
</div> <input type="hidden" th:value="${shoe.id}"/>
<!--デモ用のダミー--> <button type="button" id="modal-open" class="details">Datails</button>
<div class="productBox" > <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/> </div>
<a class="shoeName">AirMAX</a> </div>
<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> </div>
<footer class="footer"> <footer class="footer">
<div class="container"> <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