jQuery Mobile‎ > ‎01. 페이지‎ > ‎

06. 페이지 전환 효과를 바꿔볼까


jQuery Mobile에서는 6개의 페이지 전환 효과가 지원된다. 원하는 효과를 지정하려면 data-transition 속성을 지정한다. 기본적으로는 오른쪽에서 왼쪽으로 slide 효과가 적용되며, data-direction="reverse"를 지정하면 전환 방향을 반대로 할 수 있다.

<p><a href="#second_page" data-transition="slide">Slide</a>,
<a href="#second_page" data-transition="slide" data-direction="reverse">Slide, reverse</a></p>
<p><a href="#second_page" data-transition="slideup">Slide Up</a>,
<a href="#second_page" data-transition="slideup" data-direction="reverse">Slide Up, reverse</a></p>
<p><a href="#second_page" data-transition="slidedown">Slide Down</a>,
<a href="#second_page" data-transition="slidedown" data-direction="reverse">Slide Down, reverse</a></p>
<p><a href="#second_page" data-transition="pop">Pop</a>,
<a href="#second_page" data-transition="pop" data-direction="reverse">Pop, reverse</a></p>
<p><a href="#second_page" data-transition="fade">Fade</a>,
<a href="#second_page" data-transition="fade" data-direction="reverse">Fade, reverse</a></p>
<p><a href="#second_page" data-transition="flip">Flip</a>,
<a href="#second_page" data-transition="flip" data-direction="reverse">Flip, reverse</a></p>

  • slide

  • slideup

  • slidedown

  • pop

  • fade

  • flip

페이지 전환 설정의 기본 값을 변경하려면 다음의 설정을 이용한다.

$.mobile.defaultPageTransition = "slide"
$.mobile.defaultDialogTransition = "pop"

Comments