■ Front-End ■/jQuery Mobile

[jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동

한길(One Way) 2023. 2. 11.

모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.

4개의 페이지를 만들고 페이지 이동시 전환하는 효과를 적용하는 예제이다. footer에 data-position 속성값을 fixed로 주어 하단에 고정하였다.

먼저 data-role을 page로 정의한 section 4개를 만든다.

첫번째 페이지에서 <a href="" 에 삽(#)과 함께 페이지 id를 입력하면 그 페이지로 링크가 연결된다. data-transition속성으로 전환 시 효과를 줄 수 있다.

효과로 줄 수 있는 속성값은 다음과 같다. 하나씩 속성값을 주고 효과를 확인해 보면 쉽게 알 수 있다.

fade
flip
flow
none
pop
slidefade
slide
slidedown
slideup
turn

아래는 전체 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
 
<body>
    <section id="page1" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>페이지 전환</h1>
        </header>
        <div class="content" data-role="content">
           <p>첫번째 페이지</p>
           <p>
               <a href="#page2" data-transition="flow">두번째 페이지로 이동 (flow)</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page2" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>페이지 전환</h1>
        </header>
        <div class="content" data-role="content">
           <p>두번째 페이지</p>
           <p>
               <a href="#page3" data-transition="slide">세번째 페이지로 이동 (slide)</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page3" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>페이지 전환</h1>
        </header>
        <div class="content" data-role="content">
           <p>세번째 페이지</p>
           <p>
               <a href="#page4" data-transition="flip">네번째 페이지로 이동 (flip)</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page4" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>페이지 전환</h1>
        </header>
        <div class="content" data-role="content">
           <p>네번째 페이지</p>
           <p>
               <a href="#page1" data-transition="flip" data-direction="reverse">첫번째 페이지로 이동 (flip-reverse)</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
</body> 
</html>

jqm_02.html

0.00MB

결과화면

페이지 전환 시 움직이는 효과로 처음에는 flow 효과, 다음에는 slide, 그리고 flip과 filp에 reverse를 적용하였다. 페이지 전환시 적절한 효과를 주는 것은 좋지만 너무 많은 효과를 주게 되면 산만해질 수가 있다.

jQuery Mobile에서 알아둘 속성

data-role="page | header | content | footer"

data-theme="a | b | c"

data-position="fixed"

data-add-back-btn="true | false"

728x90

저작자표시 비영리

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

[jQuery 모바일] 버튼을 그룹으로 묶어보자 (0)	2023.02.11
[jQuery 모바일] 다양한 모양의 버튼을 만들어보자 (0)	2023.02.11
[jQuery 모바일] 다이얼로그 화면으로 팝업 (0)	2023.02.11
[jQuery 모바일] 페이지를 추가하고 페이지를 이동해 보자 (0)	2023.02.11
[jQuery 모바일] 안녕, 제이쿼리 모바일 (Hello, jQuery Mobile) (0)	2023.02.11

[jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

댓글

티스토리툴바