1. css에서 해당 태그 위치 위로 이동시키기
사진과 같이 원래는 셀렉태그 위에 줄선이 KR/EN에 가려져서 문제 였는데 이 셀렉태그를 감싼 div에서
margin-top이라는거를 사용해서 위치를 이동시킬 수 있었다!
<div class="header-bar" style="position: relative;height: 50px; line-height: 60px; margin-top: 2px">
<select id="sortSelect" class="sort-select" style="position: absolute; top: 10px; right: 20px; width: 100px; height: 30px;">
<option value="01" <c:if test="${sortValue =='01' }">selected</c:if>>Newest</option>
<option value="02" <c:if test="${sortValue =='02' }">selected</c:if>>Lowest Price</option>
<option value="03" <c:if test="${sortValue =='03' }">selected</c:if>>Highest Price</option>
<option value="04" <c:if test="${sortValue =='04' }">selected</c:if>>Name Order</option>
</select>
</div>
2. slect 태그와 비슷한 검색기능까지 있는 datalist태그 사용
먼저 html코드는 이거고
<input type="hidden" id="hidden_admin_idx" value="${vo.admin_idx}">
<div id="rentalTeamSelection" style="display: <c:if test="${vo.admin_role_type == '2'}">block</c:if>;">
<div class='section-title font-bold'><strong class='font-bold'><span class='fa fa-dot-circle-o'></span>대관팀 선택</strong></div>
<input list="rentalTeams" id="dropdown_search_type1" name="admin_idx" class="btn-xs btn-primary width-20per" placeholder="검색/선택">
<datalist id="rentalTeams">
<option data-value="">선택</option>
</datalist>
</div>
밑에 등록 화면보면 유저의 인덱스까지 보여지게 된다. 이유는 datalist태그에서는 value값이 보여지는듯하다
datalist.append('<option value="' + team.idx + '">' + team.email + '(' + team.name + ')</option>');
그래서 찾아보니 이렇게 data-value는 서버에 전달할값이고,value는 화면에 보여질 값을 말하는거다.
const showValue = team.email + '(' + team.name + ')';
datalist.append("<option data-value=" + team.idx + " value=" + showValue + "></option>");
근데 이제 유저가 선택한 option태그 값은 html코드보면 dropdown_search_type1에 대입되는데 이게 data-value값이 아닌 value의 값이 대입된다.
이제 서버에 보낼때는 ajax인가를 이용해서 보내는데 밑에 첫번째줄 코드보면 html에 대입된 dropdown_search_type1의 값을 가져오니 admin_idx_search_value에는 이메일(이름) 형식 데이터 담긴다(위에 data-value가 아닌 value값이 담긴다했으니)
그러고 두번째줄 코드보면 admin_idx_search_value에 해당하는 값에서 attr('data-value')를 통해 인덱스 값을 가져오는거다.
먼가 딕셔너리 느낌처럼 한다.
const admin_idx_search_value = $("#dropdown_search_type1").val();
program.admin_idx = $('#rentalTeams [value="' + admin_idx_search_value + '"]').attr('data-value');
이제 수정의 경우 코드를 보면 val()안에 selectedValue가 있어서 화면에 수정중인 유저가 선택되있도록 하고
서버에 값보내는건 위에 등록의 바로 위에 코드적용이라 이메일(이름)에 맞는 data-value값 선택되고 서버에 보내는 방식이다.
'input[list="rentalTeams"]'의 의미 GPT 답변
"input[list="rentalTeams"]는 특정 datalist와 연결된 input 요소를 선택하기 위한 jQuery 선택자입니다. 이 선택자는 list 속성이 rentalTeams로 설정된 input 요소를 찾습니다."
const selectedTeam = data.find(team => team.idx === parseInt(adminIdx));
if (selectedTeam) {
const selectedValue = selectedTeam.email + '(' + selectedTeam.name + ')';
$('input[list="rentalTeams"]').val(selectedValue);
}
3. window 객체의 다양한 이벤트에 따라 함수 실행시키기
일단 문제는 옛날 사이트라 그런지 해당 사이트의 크기를 줄이거나 변경시켜도 동적으로 그 화면 크기에 맞춰서 변하지 않고 그냥 잘려 보인다.
근데 그 사이트에 챗봇 아이콘을 오른쪽 밑에 배치시키고 위아래 스크롤 할때는 고정시키면서 따라오게 하고,화면을 줄일시에는 안따라오고 화면으로 가리게 할거다.
<div class="fixed-message-icon" id="chatIcon">
<img alt="Message Icon" loading="lazy" width="50" height="50" decoding="async" src="${pageContext.request.contextPath}/resources/img/chatbot_icon.png" style="color: transparent;" onclick="openChat()">
</div>
<script>
function openChat() {
// 메시지 창을 여는 로직
alert("Chat icon clicked!");
}
function setChatIconPosition() {
const chatIcon = document.getElementById('chatIcon');
const headerContainer = document.querySelector('.header .container');
const wrapperRect = headerContainer.getBoundingClientRect();
chatIcon.style.position = 'fixed';
chatIcon.style.right = (window.innerWidth - wrapperRect.right ) + 'px';
chatIcon.style.display = 'block'; // 위치 계산 후 나타나게 설정
}
// 페이지 로드 시 위치 설정
window.addEventListener('load', setChatIconPosition);
// 스크롤 및 리사이즈 시 위치 재설정
window.addEventListener('resize', setChatIconPosition);
window.addEventListener('scroll', setChatIconPosition);
</script>
이렇게 window.addEventListener()메소드를 이용하고 밑에는 GPT가 이 메소드에 대한 답변이다
- window.addEventListener('load', setChatIconPosition);
- 이벤트: load
- 설명: 이 이벤트는 브라우저가 페이지의 모든 리소스(이미지, 스타일시트, 스크립트 등)를 완전히 로드한 후에 발생합니다.
- 의미: 페이지가 완전히 로드된 후 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 설정합니다.
- window.addEventListener('resize', setChatIconPosition);
- 이벤트: resize
- 설명: 이 이벤트는 브라우저 창의 크기가 변경될 때마다 발생합니다.
- 의미: 사용자가 브라우저 창의 크기를 변경할 때마다 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 재조정합니다. 이는 브라우저 크기 변화에 따라 아이콘의 위치가 올바르게 유지되도록 하기 위함입니다.
- window.addEventListener('scroll', setChatIconPosition);
- 이벤트: scroll
- 설명: 이 이벤트는 사용자가 페이지를 스크롤할 때마다 발생합니다.
- 의미: 사용자가 페이지를 스크롤할 때마다 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 재조정합니다. 이는 스크롤 위치에 따라 아이콘의 위치가 올바르게 유지되도록 하기 위함입니다.
'플랫폼엘 정리or해석' 카테고리의 다른 글
DB 조회시 인덱스 기능 (0) | 2024.08.05 |
---|---|
엑셀에 있는 데이터를 PANDAS 이용해서 DB에 저장 (0) | 2024.08.05 |
커스텀 어노테이션 적용후,인터셉터에 적용하기 (0) | 2024.07.12 |
실무 다른 동료 SQL문 분석 (0) | 2024.07.11 |
MySql의 암호화,복호화 (0) | 2024.07.04 |