총 게시물 62건, 최근 0 건 안내 RSS 글쓰기
이전글  다음글  목록 글쓰기
[강좌]

4. JQuery Mobile - Change Page 애니메이션 효과 build: Beta 3 2011.9.17

글쓴이 : 집게사장 날짜 : 2011-09-17 (토) 18:19 조회 : 18604
글주소 : http://www.androidside.com/B57/16
 
  알지오 JQUERY
IT전문교육 실무중심 JQUERY, 원격평생교육시설 정식인가.
www.alzio.co.kr/
  JQUERY 컴스쿨닷컴
JQUERY 인강만으로 합격가능, 단기완성, 무한반복 전 강좌 스마트폰 학습가능
www.컴스쿨.com
  SBS아카데미컴퓨터학원손일구
방학특강 40 % 할인, 취업포트폴리오, 수강료조회, 국비지원JQUERY
daejeon-sbsedu.com
신청하기



JQuery Mobile 는 페이지 애니메이션 전환을 제공합니다.

 속성값 
 fade 현재 화면 위에서 서서히 나타납니다. 
 flip 현재 화면이 뒤집히면서 사라지고 다음뷰가 나타납니다.
 pop 화면 한가운데에서 페이지가 올라옵니다.
 slide 왼쪽이나 오른쪽으로 이전 내용을 밀어내며 나타납니다.
 slidedown 화면 위에서 내려오면서 현재 내용을 덮습니다.
 slideup 화면 아래에서 올라오며 현재 내용을 덮습니다.


  1. <body>
  2. <section id="page1" data-role="page">
  3. <header data-role="header"><h1>Hello AndroidSide</h1></header>
  4. <div data-role="contnet" class="content">
  5. <p align="center">첫번째 Page</p>
  6. <p align="center"><a href="#page2"
  7.   data-rel="dialog"
  8.   data-transition="slidedown"
  9.   >Page2 Dialog</a></p>
  10. </div>
  11. <footer data-role="footer"><h1>JQuery Mobile</h1></footer>
  12. </section>
  13. </body>
  14. <!-- 2Page -->
  15. <body>
  16. <section id="page2" data-role="page">
  17. <header data-role="header"><h1>Hello AndroidSide</h1></header>
  18. <div data-role="conent" class="content">
  19. <p align="center">두번째 Dialog Page</p>
  20. <p align="center"><a href="#page1"
  21.   data-transition="flip"
  22.   >1 Page 이동</a></p>
  23. </div>
  24. <footer data-role="footer"><h1>JQuery Mobile</h1></footer>
  25. </section>
  26. </body>
<a> Tag 속성을  data-transition="효과"를 주게되면 간단하게 바뀐다는것을 알게된다.


역방향 전환
물론 전환 방향을 뒤집는건 slide / flip 등 일부 전환에만 유용하며 fade / pop 에는 유용하지 않다.
data-direction="reverse" 속성을 지정하여 거꾸로 일어나게끔 할수 있다.

  1. <body>
  2. <section id="page2" data-role="page">
  3. <header data-role="header"><h1>Hello AndroidSide</h1></header>
  4. <div data-role="conent" class="content">
  5. <p align="center">두번째 Dialog Page</p>
  6. <p align="center"><a href="#page1"
  7.   data-transition="flip"
  8.   data-direction="reverse"
  9.   >1 Page 이동</a></p>
  10. </div>
  11. <footer data-role="footer"><h1>JQuery Mobile</h1></footer>
  12. </section>
  13. </body>
  14. </html>

  CSS3의 변형을 이용하여 페이지 전환 애니메이션 을 표현하며, 
크롬 과 같은 Webkit 브라우저에서만 표현이 되다.
Java script 를 이용한 위젯 페턴
1번화면의 메뉴 라는 글은 원래 안보인다. 하지만 ShowHide 메뉴를 눌리면  
화면 밖에서 중앙으로 글이 나타나게 된다.

2번 화면의 경우는  메뉴 라는 글을 화면 밖에서 sliding 효과로 이동시키는 소스이다.

<1번 화면> <2번 화면>



  1. <section id="page2" data-role="page">
  2. <header data-role="header"><h1>Hello AndroidSide</h1></header>
  3. <div data-role="conent" class="content">
  4. <p class="show-menu" align="center">Show/Hide 메뉴</p>
  5. <div class="sliding-menu slide out">
  6. <p align="center">메뉴</p></div>
  7. </div>
  8. <footer data-role="footer"><h2>JQuery Mobile</h2></footer>
  9. </section>
  10. <!-- JS -->
  11. <script>
  12. $(document).ready(function() {
  13. <!-- show-menu 글을 클릭했을때의 함수이다. -->
  14. $(".show-menu").click(function() {
  15. $(".sliding-menu").toggleClass("reverse out in");
  16. })
  17. })
  18. </script>




등푸른_망둥어

집게사장 님의 웹(WEB) 최신글 [더보기]


추천/비추천 클릭하면 추천받으신 분, 추천하신 분 모두에게 포인트가 지급됩니다.

어깨빼면시체 2011-10-24 (월) 13:54
JQuery 잘 배우고 갑니다.
댓글주소
나우콤 2011-11-02 (수) 13:24
감사합니다.
댓글주소
예뽕 2011-12-01 (목) 16:38
감사함당
댓글주소
JavaManiA 2012-01-10 (화) 09:42
도움이 많이 되었습니다. 감사합니다.
댓글주소
간지1프로 2012-03-21 (수) 15:12
감사합니다.
댓글주소
청깡 2013-01-13 (일) 22:57
감사합니다.
댓글주소
     
     
안사지킴이 2013-01-13 (일) 22:57
축하드립니다. ;)
청깡님은 럭키라이팅에 당첨되어 6 포인트 지급되었습니다.
신명 2014-07-29 (화) 11:34
한 수 배웠습니다!
댓글주소
딸기우유주까 2014-11-30 (일) 16:11

감사합니다.


댓글주소
이전글  다음글  목록 글쓰기

총 게시물 62건, 최근 0 건 안내 RSS
번호 분류 제목 글쓴이 날짜 추천 비추천 조회
62 소스코드
 $scope.page = 0;   $scope.total = 1;   $scope.restaurants = [];   $scope.getRestaurants = function () {     $scop…
조각 08-10 1 0 643
61 소스코드
감사합니다.
우리큰형님 07-08 2 1 1687
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 4 0 3386
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3135
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3059
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 3484
56 TIP&TECH
A self-hosted chat app for small teams built by Security Compass. Features and Stuff BYOS (bring your own server) Persistent messages M…
카이로 03-18 3 0 5361
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 3706
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 15542
53 TIP&TECH
$sudo apt-get install python-software-properties python g++ make  $sudo add-apt-repository ppa:chris-lea/node.js  $sudo apt-get update…
카이로 12-18 4 0 4969
52 소스코드
50+ FREE BEAUTIFUL JQUERY CSS3 MENU PLUGINS & TUTORIALS Free beautiful jQuery CSS3 menu navigation plugin and tutorials that it is an important…
카이로 11-28 3 0 4762
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 8256
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 5371
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 6385
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 11999
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 5457
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 4988
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 7223
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 6539
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 6126
 1  2  3  4  맨끝
 


Copyright ⓒ www.androidside.com. All rights reserved.
채팅 권한: 글쓰기 1개
2레벨 이상만 대화 가능
공개 채팅: 평일 !(9시 ~ 17시),토,일
안사2 변경사항 보러가기 챗방이 잘 안보이면 크롬에서 접속해주세요
챗방 숨기기 |  챗방 보이기