Internal / External Link
전자정부 모바일 표준프레임워크는 HTML의 모든 표준 링크를 지원하며 기본적으로 Ajax 방식을 이용하여 페이지를 전환한다.
유의사항
Ajax로 도메인 내부링크를 연결 후 페이지 내부링크를 호출하면 정상페이지가 아닌 이전 페이지가 출력된다.
이를 방지 하기 위해 첫 도메인 내부링크는 data-ajax="false" 또는 rel="external"를 선언하여 페이지를 호출한다.
A.jsp
- <a href="B.jsp" data-role="button" data-ajax="false">Go To 2nd Page</a>
- <a href="B.jsp" data-role="button" rel="external">Go To 2nd Page</a>
B.jsp
- <--main page start-->
- <div data-role="page" id=main>
- <div data-role="header" data-theme="b">
- ...
- </div>
- <div data-role="content">
- <h1>This is #One</h1>
- <a href="#sub" data-role="button">Go to the #two</a>
- </div>
- ...
- </div>
- <--sub page start-->
- <div data-role="page" id="sub">
- ...
- </div>
기본코드
HTML의 Anchor 태그를 이용하여 링크 기능을 사용할 수 있다.
도메인 내부 링크
- <a href="/mguide3.5/guide/guide.do">도메인 내부 링크</a>
외부 링크
- <a href="http://www.egovframe.go.kr">외부 링크</a>
- Ajax를 사용하는 링크
- Ajax 방식의 링크를 이용하면 다양한 화면전환 효과가 자동으로 적용된다.
Ajax 방식의 링크를 사용하면 이동한 페이지 헤더 부분의 Javascript, CSS 효과가 적용되지 않을 수 있기 때문에 Javascript, CSS를 페이지를 불러들이는 Page에 정의해야한다.
- 페이지 내부링크
- data-role 속성 값이 page 인 <div data-role="page"> Tag에 id 속성을 부여하여 페이지를 구분한다.
href 속성에 '#[페이지 id]' 값을 부여하여 해당 id를 갖는 페이지로의 링크가 가능하다.
또한 내부링크를 Page를 호출 하는 링크는 rel="external" or data-ajax="false"를 이용하여 페이지 내부링크 페이지를 호출해야한다.
페이지 내부링크
- <a href="#Two" data-role="button">페이지 내부링크</a>
- 도메인 내부링크
- 동일한 도메인 내의 페이지로 링크를 걸어 이동한다.
도메인 내부링크
- <a href="/mguide3.5/guide/guide.do" data-role="button">도메인 내부링크</a>
- 다이얼로그 링크
- data-rel="dialog" 속성을 추가하여 다이얼로그 형태로 링크를 실행한다.
다이얼로그 링크
- <a href="/mguide3.5/guide/guide.do" data-role="button" data-rel="dialog">다이얼로그 링크</a>
- Ajax를 사용하지 않는 링크
- Ajax 방식을 사용하지 않는 링크는 페이지 전체를 Refresh 한다. Ajax 방식을 사용하지 않으면 화면효과가 적용되지 않지만
헤더 부분의 Javascript, CSS 를 적용할 수 있다.
- 외부 링크
- 외부 도메인의 사이트로 링크를 걸어 이동한다.
외부 링크
- <a href="http://www.egovframe.go.kr" data-role="button">외부 링크</a>
- data-ajax="false" 속성추가
- data-ajax="false" 속성을 추가하여 Ajax 효과 없이 페이지를 이동한다.
data-ajax="false"
- <a href="/mguide3.5/guide/guide.do" data-ajax="false" data-role="button">data-ajax="false"</a>
- rel="external" 속성추가
- rel="external" 속성을 추가하면 Ajax 효과 없이 페이지를 이동한다.
rel="external"
- <a href="/mguide3.5/guide/guide.do" rel="external" data-role="button">rel="external"</a>
- target 속성추가
- target 속성을 추가하면 Ajax 효과 없이 새로운 브라우저 창으로 이동한다.
target
- <a href="/mguide3.5/guide/guide.do" target="home" data-role="button">target"</a>
링크버튼
data-role="button" 속성을 추가하여 링크를 버튼 형태로 표시한다.
링크 버튼
- <a href="/mguide3.5/guide/guide.do" data-role="button">링크 버튼</a>
에러 메시지 표시
해당 페이지로 이동이 불가한 경우 자동으로 에러 메시지를 표시한다.
에러 메시지
- <a href="nopage.jsp" data-role="button">에러 메시지</a>
메일 연동 링크
href 속성 값으로 mailto:[메일주소]를 추가하면 링크를 통해 자동으로 메일기능을 실행한다.
메일링크
- <a href="person@domain.com" data-role="button">메일링크</a>
href 속성 값으로 mailto:[메일주소]를 추가한후 cc="[메일주소]"를 통해 참조, bcc="[숨은 참조]", subject="[제목]", body="[내용]" 을 추가 하면 다양한 형식으로
메일 연동을 할 수 있다.
다중메일링크
- <a href="mailto:person@domain.com?cc=person2@domain.com&bcc=person3@domain.com&subject=Hello&body=Happy%20Birthday!">다중메일링크</a>
통화 연동 링크
href 속성 값으로 tel:[전화번호]를 추가하면 링크를 통해 자동으로 휴대폰의 통화기능을 실행한다.
통화링크
- <a href="tel:00000000000" data-role="button">Phone Links</a>