쪽빛하늘

반응형 모바일 개발을 하다가 화면에서 화살표 외 컨텐츠 내용 부분을
스와이프 할 경우 좌우로 움직일 수 있도록 하는 부분에 대한 내용이 필요해서 정리.

<div>
  <div class="pop_bg"></div>
  <div class="pop_wrapn"></div>
</div>

위에 div영역도 상세한 내용은 제외하고, 간단히 아래 js에서 사용하는 부분에 대해 구조만 확인할 수 있도록 작성했다.

var fn_open = function() {
	// 팝업열기
};

var fn_close = function() {
	// 팝업 닫기
};

var fn_getPrev = function() {
	// 이전 내용
};

var fn_getNext = function() {
	// 다음 내용
};

$(document).ready(function(){
	$('.pop_area').on('touchstart', function() {
    	// 처음 터치한 영역의 X,Y 좌표
		startX = event.touches[0].pageX;
		startY = event.touches[0].pageY;
		console.log('startX :: ' + startX);
		console.log('startY :: ' + startY);
	});

	$('.pop_area').on('touchend', function() {
    	// 마지막 터치한 영역의 X,Y 좌표
		endX = event.changedTouches[0].pageX;
		endY = event.changedTouches[0].pageY;
		console.log('endX :: ' + endX);
		console.log('endY :: ' + endY);

		if (startX > endX) {
        	// 오른쪽에서 왼쪽으로 스와이프
			fn_getNext();
		} else if (startX < endX) {
        	// 왼쪽에서 오른쪽으로 스와이프
			fn_getPrev();
		} else {
        	// X 좌표 시작과 끝이 같을 때
        }

		console.log(Number(startY) - Number(endY));
		if (startY < endY && (Number(endY) - Number(startY)) > 50) {
        	// 위에서 아래로 스와이프
            // 범위가 너무 작을 경우 좌우로 움직이면서 Y값이 달라질 수 있으므로
            // 임의로 50의 값을 줌
			fn_close();
		}
	});

	$('.pop_bg').on('touchmove', function() {
    	// 팝업 화면 외 배경에서 행동이 일었을 경우
		fn_close();
	});
});

위의 내용만 보면 간단하긴 한데, 그래도 한 번 정리해두는 편이 좋을 것 같아서 각 함수 안에 소스는 지우고 올린다.

모바일의 경우 애니메이션 효과를 주는 경우가 많기 때문에 스와이프도 당연히 될거라고 생각하는 경우가 많아서
두가지가 함께 진행이 되는 경우가 많은 것 같다.

라디오 버튼을 이용하여 DIV를 각각 활성화 시켜서 사용하는 함수를 간단히 작성하면 아래와 같다.

- HTML

- jquery

위와 같은 방법으로 작성하면 된다.

jquery는 css에 display: none; 일 경우 화면에서 보여지지 않고, display: block; 일 경우 화면에 보여지는 것을 이용한 것이다.

POP2의 영역이 처음부터 노출되는 것을 막기 위해서는 HTML에서 스타일을 주면 된다.

함수 안에 return false;를 입력하게 되면 2번을 선택하더라도 기존에 체크되어있던 라디오버튼 1번에 계속 체크가 되어있다. (DIV는 POP2가 보이게된다.)

이를 해결하기 위해서는 간단하게 return false; 를 지우면 된다.

게시판을 만들다보면 게시글 제목이 너무 길어 생략이 필요한 경우가 있다.

이 경우 CSS로 간단하게 해결할 수 있다.

위의 내용은 table과 td에 모두 적용이 되지만 class로 지정하여 사용하면 원하는 부분에만 사용이 가능하다.

jsp에서 form을 이용하여 화면간의 이동을 하면서 변수를 넘길 때, 유용하게 사용하는 형식은 대부분

위와 같은 형태이다.

하지만 파일과 같은 이유 때문에 아래와 같은 형태로 사용을 하게 된다면 request를 이용하여 데이터를 받아오는 것은 불가능하다.

이때는, MultipartRequest multi = new MultipartRequest(request, savePath, maxSize, "UTF-8", new DefaultFileRenamePolicy()); 를 이용하여

request 대신 multi를 이용하여 받아오는데, 

상황에 따라 request를 이용해야할 경우가 발생한다. 이때 javascript에서

위와 같은 형태로 form의 encoding을 변경하여 사용할 수 있다.

쓸 때마다 기억이 제대로 나지 않아서 찾아보는 내용이다.

개인적으로 자주 쓸 일이 없기도 하고, 기억력이 좋지 않기도 하고...

다음에 또 이 내용을 찾는다고 시간을 날리지 않길 바라며.

javascript에서 URL 파라미터를 가져올 일이 있어서 찾게 되었다.

내가 받은 URL의 형식은

http://highello.tistory.com?param=hi

의 형태로 하나의 값만 가져오면 되는 형태였다.

위와같이 사용하였다.

물론 많은 값을 가져오는 다양한 방법이 있지만 결과 값으로 'hi'라는 값만 가져오면 되는 경우였기에 위와같이 사용하였다.

더 많은 parameter를 가져오기 위해서는 위의 방법을 사용하는 것이 적절하지 않다.

물론 위의 내용을 조금 수정하여 Parameter로 들어온 값만 가져와서 변경하여 사용하는 것은 가능하다.

JSTL을 사용하면서 필요에 의해 찾게 된 기능 중 하나가 바로 숫자 포맷을 맞추는 것이다.

연도, 월을 선택하는 select 박스를 만들던 중 1월에서 9월까지를 01월에서 09월로 표현하기 위해 찾았다.

우선 사용을 위해서는 상단에 taglib을 추가해야하는데, 추가할 taglib은 아래와 같다.

위의 taglib을 추가하였으면 fmt JSTL을 JSP에서 사용할 수 있다.

월을 두자리 숫자로 나타내기 위해 사용한 formatNumber은 아래와 같다.

물론 실제 사용할 때는 selected의 option부분을 forEach문을 이용하여 사용하였기에 value에는 forEach문의 변수가 들어가도록 넣었다.

그리고 selected의 값을 위해 if를 사용하여 비교(선택된 값인 month변수의 값이 있는 경우)를 하였다.

기존에 숫자 포맷을 맞출 필요가 없을 때는 해당 부분에 <c:out>을 사용하여 값을 보여줬었다.

*) 위에 type은 정의하지 않았는데 number를 기본 값으로 가지며, number, percent, urrency가 존재한다.

JSTL을 이용하여 합계를 구하는 방법이 필요할 때가 있다.

(기본적으로 <c:set>, <c:out>을 사용한다.)

개인적으로는 forEach문과 함께 사용하는 경우가 많은 것 같다.

보통 가장 우측이나 하단에 합계에 관련되어 숫자를 계산하기에 적합하다.

아래 형태는 우측에 합계를 나타낼 때 자주 사용할 수 있는 형태이다.

아래 형태는 하단에 합계를 나타낼 때 자주 사용할 수 있는 형태이다.

두가지 모두를 사용해서 한 테이블을 나타낼 수도 있고, 각각 필요한 걸 사용할 수도 있다.

굳이 <c:set>이 <td>안에 들어가지 않더라도 사용하는데는 문제가 없으나 기본 위치를 저렇게 생각하고 사용하면 개인적으로 편리한 것 같다.

우측 합계와 같이 변수를 따로 몇개 더하지 않아도 된다면 굳이 <c:set>을 사용하지 않고, <c:out>안에서 더하더라도 상관 없을 것 같다.