jQuery Mobile

## 링크 방식 , 뒤로가기

보통의 HTML 에서 링크 이동 방식은 

<a href="http://thingsthis.tistory.com">티스토리로 이동!</a>

인데, jQuery Mobile 에서는 기본적으로 a 태그의 href 에 있는 URL 의 페이지를 ajax 로 불러와서 현재 페이지에 붙이는 방식이다.

일반적인 웹에서 사용하는 ajax 로 HTML 을 붙이는 것 처럼 화면 깜빡임없이 말이다.

그런데 만약 href 태그에 현재 도메인이 아닌 다른 도메인을 입력 시 일반적인 링크 방식으로 동작하게 된다.

이유는 크로스 도메인의 AJAX 호출이 제한되는 상황 때문이다.

그리고 rel="external" 이나 data-ajax="false" 속성을 주어도 마찬가지로 일반적인 링크 방식으로 동작한다.

rel="external" 이나 data-ajax="false" 나 모두 일반적인 링크 방식으로 동작하는데 구분은 왜 하였을까?

이뉴는 rel="external" 의 경우 외부 도메인으로 링크를 걸 경우 이 속성을 명시해주고,

data-ajax="false" 는 내부 도메인으로 링크를 걸었으나 jQuery Mobile 링크 방식이 아닌 일반적인 링크 방식으로 사용 할 경우 명시해 준다고 한다.

또한 a 태그에 target 속성을 줘도 마찬가지이다. target 으로 지정된 iframe, popup 이 있을 경우 해당 페이지가 갱신되고,

만약 없다면 새 창으로 동작하게 된다. 일반적인 웹 방식과 동일하게 말이다.

뒤로가기의 경우 a 태그에 data-rel="back" 속성과 data-direction="reverse" 속성을 명시하여 사용하게 되는데 차이점은 아래와 같다

data-rel="back" : 웹브라우저의 뒤로가기 기능과 일치. 스크롤의 위치와 기타 등등 이전 화면의 상태를 그대로 복구

data-direction="reverse" : 이전 페이지로 이동만 함.

보통 

<a href="#" data-rel="back" data-direction="reverse" class="btnBack"><img src="/images/btn_bank.gif /></a>

처럼 둘 모두 쓰는 것 같다.

정리하자면 이렇다.

- jQuery Mobile 

- 링크 방식 : a 태그의 href 에 있는 URL 페이지를 불러와서 현재 페이지를 갱신. ajax 로 불러와서 붙이기에 화면 깜빡임이 없다.

* 일반적인 링크 동작을 원할 시

1. 외부 도메인 입력 시

1-1. 그냥 입력해도 일반적인 링크로 동작

1-2. 속성으로 rel="external" 을 명시해주면 의미적으로 이해하기 좋음

2. 내부 도메인 입력 시

2-1. data-ajax="false" 속성 명시해주면 내부 도메인이지만 일반적인 링크 방식으로 동작

3. target 주기

- 뒤로가기 : data-rel="back" 과 data-direction="reverse" 를 명시하여 사용.