mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][34] 검색 필터링 기능 - 3

Browse Source 
https://kimvampa.tistory.com/255
This commit is contained in:
SeoJin Kim
2021-10-05 23:16:21 +09:00
parent bae6255343
commit c475310095
4 changed files with 202 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
VamPa/src/main/webapp/WEB-INF/views/search.jsp
View File

@@ -90,6 +90,37 @@
<!-- 게시물 o -->
<c:if test="${listcheck != 'empty'}">
<div class="search_filter">
<div class="filter_button_wrap">
<button class="filter_button filter_active" id="filter_button_a">국내</button>
<button class="filter_button" id="filter_button_b">외국</button>
</div>
<div class="filter_content filter_a">
<a>테스트용1</a>
<a>테스트용2</a>
<a>테스트용3</a>
<a>테스트용4</a>
<a>테스트용5</a>
<a>테스트용6</a>
</div>
<div class="filter_content filter_b">
<a>테스트용1</a>
<a>테스트용2</a>
<a>테스트용3</a>
<a>테스트용4</a>
<a>테스트용5</a>
<a>테스트용6</a>
</div>
<form id="filter_form" action="/search" method="get" >
<input type="hidden" name="keyword">
<input type="hidden" name="cateCode">
<input type="hidden" name="type">
</form>
</div>
<div class="list_search_result">
<table class="type_list">
@@ -263,6 +294,24 @@
});
/* 검색 필터 */
let buttonA = $("#filter_button_a");
let buttonB = $("#filter_button_b");
buttonA.on("click", function(){
$(".filter_b").css("display", "none");
$(".filter_a").css("display", "block");
buttonA.attr("class", "filter_button filter_active");
buttonB.attr("class", "filter_button");
});
buttonB.on("click", function(){
$(".filter_a").css("display", "none");
$(".filter_b").css("display", "block");
buttonB.attr("class", "filter_button filter_active");
buttonA.attr("class", "filter_button");
});
$(document).ready(function(){
// 검색 타입 selected

52
VamPa/src/main/webapp/resources/css/search.css
View File

@@ -259,6 +259,58 @@ a{
font-size: 25px;
}
/* 필터정보 */
.search_filter {
width: 85%;
margin: auto;
margin-top: 30px;
margin-bottom: 50px;
}
.filter_button_wrap {
width: 100%;
}
.filter_button_wrap button {
width: 50%;
}
.filter_button{
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.filter_button_wrap:after {
content: "";
clear: both;
display: table;
}
.filter_button_wrap button:not(:last-child) {
border-right: none;
}
.filter_button:hover {
background-color: #3e8e41;
}
.filter_active{
background-color: #045d3c;
}
.filter_content{
padding:20px 50px 20px 50px;
border: 1px solid gray;
}
.filter_content a:not(:first-child){
margin-left: 10px;
}
.filter_a{
display: block;
}
.filter_b{
display: none;
}
/* footer navai 영역 */
.footer_nav{

51
VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp
View File

@@ -90,7 +90,38 @@
<!-- 게시물 o -->
<c:if test="${listcheck != 'empty'}">
<div class="search_filter">
<div class="filter_button_wrap">
<button class="filter_button filter_active" id="filter_button_a">국내</button>
<button class="filter_button" id="filter_button_b">외국</button>
</div>
<div class="filter_content filter_a">
<a>테스트용1</a>
<a>테스트용2</a>
<a>테스트용3</a>
<a>테스트용4</a>
<a>테스트용5</a>
<a>테스트용6</a>
</div>
<div class="filter_content filter_b">
<a>테스트용1</a>
<a>테스트용2</a>
<a>테스트용3</a>
<a>테스트용4</a>
<a>테스트용5</a>
<a>테스트용6</a>
</div>
<form id="filter_form" action="/search" method="get" >
<input type="hidden" name="keyword">
<input type="hidden" name="cateCode">
<input type="hidden" name="type">
</form>
</div>
<div class="list_search_result">
<table class="type_list">
<colgroup>
@@ -261,6 +292,24 @@
});
/* 검색 필터 */
let buttonA = $("#filter_button_a");
let buttonB = $("#filter_button_b");
buttonA.on("click", function(){
$(".filter_b").css("display", "none");
$(".filter_a").css("display", "block");
buttonA.attr("class", "filter_button filter_active");
buttonB.attr("class", "filter_button");
});
buttonB.on("click", function(){
$(".filter_a").css("display", "none");
$(".filter_b").css("display", "block");
buttonB.attr("class", "filter_button filter_active");
buttonA.attr("class", "filter_button");
});
$(document).ready(function(){

51
VamPa_MySQL/src/main/webapp/resources/css/search.css
View File

@@ -259,6 +259,57 @@ a{
font-size: 25px;
}
/* 필터정보 */
.search_filter {
width: 85%;
margin: auto;
margin-top: 30px;
margin-bottom: 50px;
}
.filter_button_wrap {
width: 100%;
}
.filter_button_wrap button {
width: 50%;
}
.filter_button{
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.filter_button_wrap:after {
content: "";
clear: both;
display: table;
}
.filter_button_wrap button:not(:last-child) {
border-right: none;
}
.filter_button:hover {
background-color: #3e8e41;
}
.filter_active{
background-color: #045d3c;
}
.filter_content{
padding:20px 50px 20px 50px;
border: 1px solid gray;
}
.filter_content a:not(:first-child){
margin-left: 10px;
}
.filter_a{
display: block;
}
.filter_b{
display: none;
}
/* footer navai 영역 */
.footer_nav{