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
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 102 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
...@@ -1931,4 +1931,16 @@ th, td { ...@@ -1931,4 +1931,16 @@ th, td {
.button-link:hover { .button-link:hover {
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() {
$('#showName').empty();
$('#showPrice').empty(); $(".details").click(function(event){
//以下デモ参照 $('#showName').empty();
//キーボード操作などにより、オーバーレイが多重起動するのを防止する $('#showPrice').empty();
// $( this ).blur() ; //ボタンからフォーカスを外す $('#showId').empty();
// if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) //以下デモ参照
// //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) //キーボード操作などにより、オーバーレイが多重起動するのを防止する
// $( this ).blur() ; //ボタンからフォーカスを外す
//オーバーレイを出現させる // if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
$( "body" ).append( '<div id="modal-overlay"></div>' ) ; // //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
$( "#modal-overlay" ).fadeIn( "slow" ) ;
//オーバーレイを出現させる
//コンテンツをセンタリングする $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
centeringModalSyncer() ; $( "#modal-overlay" ).fadeIn( "slow" ) ;
//コンテンツをフェードインする //コンテンツをセンタリングする
$( "#modal-content" ).fadeIn( "slow" ) ; centeringModalSyncer() ;
//コンテンツをフェードインする
//一覧画面から情報取得 $( "#modal-content" ).fadeIn( "slow" ) ;
let nameField = document.createElement("a");
let priceField = document.createElement("a");
let name = $(event.target.parentNode.children[1].textContent); //一覧画面から情報取得
let price =$(event.target.parentNode.children[2].textContent); let nameField = document.createElement("p");
nameField.textContent = name.selector; let priceField = document.createElement("p");
$('#showName').append(nameField); let idField = document.createElement("input");
priceField.textContent = price.selector; idField.setAttribute("type", "hidden");
$('#showPrice').append(priceField); let name = $(event.target.parentNode.children[1].textContent);
let price =$(event.target.parentNode.children[2].textContent);
//[#modal-overlay]、または[#modal-close]をクリックしたら… let id =$(event.target.parentNode.children[3].value);
$( "#modal-overlay,#modal-close" ).unbind().click( function(){ nameField.textContent = name.selector;
$('#showName').append(nameField);
//[#modal-content]と[#modal-overlay]をフェードアウトした後に… priceField.textContent = price.selector;
$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ $('#showPrice').append(priceField);
idField.value = id.selector;
//[#modal-overlay]を削除する $('#showId').append(idField);
$('#modal-overlay').remove() ;
//[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){
//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
//[#modal-overlay]を削除する
$('#modal-overlay').remove() ;
} ) ;
} ) ; } ) ;
} ) ; } ) ;
} ) ; });
//リサイズされたら、センタリングをする関数[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,46 +16,48 @@ ...@@ -16,46 +16,48 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<!-- モーダル中身 -->
<div id="modal-content"> <!-- モーダル中身 -->
<div id="modal-content-innar"> <div id="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 --> <div id="modal-content-innar">
<img class="shoeImage" alt="productImage"/> <!-- モーダルウィンドウのコンテンツ開始 -->
<div id="showName"></div> <img class="shoeImage" alt="productImage"/>
<div id="showPrice"></div> <div id="showName"></div>
<div id="showPrice"></div>
<p><a id="modal-close" class="button-link">閉じる</a></p> <div id="showId"></div>
<button type="button" class="cartBtn">cartへ入れる</button> <p><a id="modal-close" class="button-link">閉じる</a></p>
</div> <button type="button" class="cartBtn">cartへ入れる</button>
<!-- モーダルウィンドウのコンテンツ終了 --> </div>
</div> </div>
<!-- モーダルウィンドウのコンテンツ終了 -->
<section class="header-top-section"> <section class="header-top-section">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="header-top-content"> <div class="header-top-content">
<ul class="nav nav-pills navbar-left"> <ul class="nav nav-pills navbar-left">
<li><a href="#"><i class="pe-7s-call"></i><span>123-123456789</span></a></li> <li><a href="#"><i class="pe-7s-call"></i><span>123-123456789</span></a></li>
<li><a href="#"><i class="pe-7s-mail"></i><span> info@mart.com</span></a></li> <li><a href="#"><i class="pe-7s-mail"></i><span> info@mart.com</span></a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="header-top-menu"> <div class="header-top-menu">
<ul class="nav nav-pills navbar-right"> <ul class="nav nav-pills navbar-right">
<!-- 履歴ページへ遷移 --> <!-- 履歴ページへ遷移 -->
<li><a th:href="@{/limited/log/{id}(id=${user.id})}">My Purchase Log</a></li> <li><a th:href="@{/limited/log/{id}(id=${user.id})}">My Purchase Log</a></li>
<!-- カートページへ遷移 --> <!-- カートページへ遷移 -->
<li><a th:href="@{/cart}">Cart</a></li> <li><a th:href="@{/cart}">Cart</a></li>
<!-- ログアウト --> <!-- ログアウト -->
<li><form th:action="@{/logout}" method="post"><input type="submit" value="logout" style="border:none;background-color:transparent;text-decoration:none;" class="logoutBtn"/></form></li> <li><form th:action="@{/logout}" method="post"><input type="submit" value="logout" style="border:none;background-color:transparent;text-decoration:none;" class="logoutBtn"/></form></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<header class="header-section"> <header class="header-section">
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
...@@ -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>
<a class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
</div> </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