JQuery mobile

브라우저 확인 : 크롬O / 사파리O / 파이어폭스X / 오페라X
모바일 확인 : 크롬O / 아이폰에서 확인은 못해봤지만 웹브라우저 사파리가 되니 되겠지...?
flip의 경우 크롬과 사파리 효과가 약간 다르다.

터치방식을 찾아야되는데....찾다보니 자꾸 엉뚱한게 딸려온다 ㅋㅋㅋ.
효과가 참 재미있다.

자세한건 이곳에...(영어 참 싫다..)
http://jquerymobile.com/


1. 아래 3개지 필요/head 안에 넣어주기.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

탭부분때문에 추가한 css

<style type="text/css">

  body, ul {margin:0; padding:0;}
  .header {overflow:hidden; margin-bottom:15px; background:#ccc;}
  .header ul {list-style:none; padding-left:80px;} 
  .header li {float:left; width:80px; line-height:28px; text-align:center;}
  .header li .on {color:red}
  .content {height:200px; border:1px #ccc solid; padding:10px;}

 </style>

2. html 마크업

data-role 은 JQuery mobile용 식별코드인듯.
data-role="page"  div 하나당 한 페이지라고 생각하면 된다.
div에 id를 박아주고 불러오려는 페이지를 a태그 안에서 #SecondPage 로 불러주면 SecondPage id를 가진
div 페이지가 data-transition="slide" 에서 정의하고 있는 효과로 불려지게 된다.

data-transition 에는 여러가지 효과가 있는데 위에 링크해놓은곳에 들어가보면 확인해볼수 있다. 
(Docs and Demos > Pages & dialogs > Page transitions )

ex) slide, slideup , slidedown, flip, pop, fade


<div data-role="page" id="FirstPage">

  <h1>페이지1</h1>
  <div class="header" data-role="header">

   <ul>

    <li><a href="#" class="on">탭1</a></li>

    <li><a href="#SecondPage" data-transition="slide">탭2</a></li>
    <li><a href="#ThirddPage" data-transition="flip">탭3</a></li>

   </ul>

  </div>

  <div class="content" data-role="content">
   내용1
  </div>

 </div> 

 <div data-role="page" id="SecondPage">

  <h1>페이지2</h1>
  <div class="header" data-role="header">

   <ul>

    <li><a href="#FirstPage" data-transition="slide">탭1</a></li>
    <li><a href="#" class="on">탭2</a></li>
    <li><a href="#ThirddPage" data-transition="flip">탭3</a></li>
   </ul>

  </div>

  <div class="content" data-role="content">
   내용2
  </div>

 </div>

 
 <div data-role="page" id="ThirddPage">

  <h1>페이지3</h1>
  <div class="header" data-role="header">

   <ul>
    <li><a href="#FirstPage" data-transition="slide">탭1</a></li>
    <li><a href="#SecondPage" data-transition="slide">탭2</a></li>
    <li><a href="#" class="on">탭3</a></li>
   </ul>

  </div>

  <div class="content" data-role="content">
   내용3
  </div>

 </div>

index.html

참고 : http://rintiantta.blog.me/40124403692