프로그래밍/자바스크립트

Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바

가카리 2015. 1. 29. 23:17
반응형

1.   단일 페이지와 다중 페이지에서 페이지 전환



14-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-01</title>

    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <script src="js/jquery-1.11.2.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>


  <body>

    <!-- 번째 페이지 시작 -->

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

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지 내용</p>

        <p><a href="#page2"> 번째 (내부)페이지 전환</a></p>

        <p><a href="14-02.html"> 번째 (외부)페이지 전환</a></p>  

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

    <!-- 번째 페이지 시작  -->

    <div data-role="page" id="page2" data-add-back-btn="true"><!-- 백버튼이 자동으로 만들어 지게 -->

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 (내부)페이지 내용</p>  

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

  </body>

</html>



14-02.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <title>14-02</title>

  </head>

  <body>

    <p> 내용은 jQuery Mobile 의해 DOM 추가되지 않습니다.</p>

    <!-- 번째 페이지 시작 -->

    <div data-role="page" id="page3" data-add-back-btn="true">

      <div data-role="header">

        <h3> 번째 (외부)페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 (외부)페이지 내용</p>  

      </div>

      <div data-role="footer">

        <h4>세번째 (외부)페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

  </body>

</html>


출력 화면




2.   페이지 전환 애니메이션




14-03.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-03</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.4.5.css" />

    <script src="js/jquery-1.11.2.js"></script>

    <script src="js/jquery.mobile-1.4.5.js"></script>

  </head>


  <body>

    <!-- 번째 페이지 시작 -->

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

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지 내용</p>

        <p><a href="#page2" data-transition="slide"> 번째 페이지 전환</a></p>

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

    <!-- 번째 페이지 시작 -->

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

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지 내용</p>  

        <p><a href="#page1" data-transition="slide" data-direction="reverse"> 번째 페이지 전환</a></p>

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

  </body>

</html>



출력 화면




3.   페이지 돌아가기



14-04.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-04</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.2.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

    <!-- 번째 페이지 시작 -->

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

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지 내용</p>

        <p><a href="#page2" data-transition="slide"> 번째 페이지 전환</a></p>

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

    <!-- 번째 페이지 시작 -->

    <div data-role="page" id="page2" data-add-back-btn="true">

      <div data-role="header">

        <h3> 번째 페이지 헤더</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지 내용</p>  

        <p><a data-rel="back"> 번째 페이지로 돌아가기</a></p>

      </div>

      <div data-role="footer">

        <h4> 번째 페이지 풋터</h4>

      </div>

    </div>

    <!-- 번째 페이지 -->

  </body>

</html>


출력 화면



Back 버튼이 생긴걸 알 수 있습니다.



4.   기본 버튼과 옵션




14-05.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-05</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.2.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

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

      <div data-role="header">

        <h3>jQuery Mobile : Button</h3> 

      </div>

      <div data-role="content">

        <a href="#" data-role="button">Link Button</a>

        <a href="#" data-role="button" class="ui-disabled">Link Button (disabled)</a><!-- ui-disabled ui 회색으로 바뀜-->

        <a href="#" data-role="button" data-mini="true">Link Button (mini)</a>

        <a href="#" data-role="button" data-inline="true">Link Button (inline)</a>

        <button>Button element</button>

        <input type="button" value="Button" />

        <input type="submit" value="Submit Button" />

        <input type="reset" value=" Reset Button" />

      </div>

      <div data-role="footer">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면


 

5. 아이콘 적용하기






14-06.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-06</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.2.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

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

      <div data-role="header">

        <h3>jQuery Mobile : Button</h3> 

      </div>

      <div data-role="content">

        <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">

          data-iconpos="top"</a>

        <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">

          data-iconpos="left"</a>

        <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">

          data-iconpos="right"</a> 

        <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">

          data-iconpos="bottom"</a>

        <a href="#" data-role="button" data-icon="star" data-iconpos="notext">

          data-iconpos="star"</a>

      </div>

      <div data-role="footer">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>


출력 화면

6.   그룹버튼 만들기




14-07.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-07</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

         <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>


  <body>

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

      <div data-role="header">

        <h3>jQuery Mobile : Button</h3> 

      </div>

      <div data-role="content">

        <div data-role="controlgroup">

          <a href="#" data-role="button" data-icon="check">Yes</a>

          <a href="#" data-role="button" data-icon="delete">No</a>

        </div>

        <div data-role="controlgroup" data-type="horizontal">

          <a href="#" data-role="button" data-icon="check" data-inline="true">Yes</a>

          <a href="#" data-role="button" data-icon="delete" data-inline="true">No</a>

        </div>

        <div data-role="controlgroup" data-type="horizontal">

          <a href="#" data-role="button" data-icon="check" data-inline="true" data-mini="true">Yes</a>

          <a href="#" data-role="button" data-icon="delete" data-inline="true" data-mini="true">No</a>

        </div>

      </div>

      <div data-role="footer">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면




7.   헤더 바와 풋터 바



finxed -> fixed임


14-08.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-08</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <style type="text/css">

      .footer {

        text-align: center;

      }

    </style>

         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

         <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>


  <body>

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

      <div data-role="header" data-position="fixed">

        <h3>시인의 마을</h3> 

        <a href="#" data-icon="delete">취소</a>

        <a href="#" data-icon="check">저장</a>

      </div>

      <div data-role="content">

        <h3>희망을 만드는 사람이 되라</h3>

        <p>

                         세상 사람들 모두 잠들고

                        어둠속에 갇혀서 꿈조차 잠이

                        홀로 일어난 새벽을 두려워말고

                        별을 보고 걸어가는 사람이 되라

                        희망을 만드는 사람이 되라

        </p>

        <p>                

                        겨울밤은 깊어서 눈만 내리고

                        돌아갈 없는 오늘 눈오는 밤도

                        하루의 일을 끝낸 작업장 부근

                        촛불도 꺼져가는 어두운 방에서

                        슬픔을 사랑하는 사람이 되라

                        희망을 만드는 사람이 되라

        </p>

        <p>                

                        절망도 없는 절망의 세상

                        슬픔도 없는 슬픔의 세상

                        사랑하며 살아가면 봄눈이 온다.

                        맞으며 기다리던 기다림 만나

                        맞으며 그리웁던 기다림 만나

                        얼씨구나 부등켜안고 웃어 보아라

                        절씨구나 부비며 울어 보아라

        </p>

        <p>               

                        별을 보고 걸어가는 사람이 되어

                        희망을 만드는 사람이 되어

                        내리는 보리밭 걷는 자들은

                        누구든지 달려와서 가슴 가득히

                        꿈을 받아라

                        꿈을 받아라.

        </p>

        <p>정호승</p>

      </div>

      <div data-role="footer" data-position="fixed" class="footer">

        <a href="#" data-icon="plus">추가</a>

        <a href="#" data-icon="arrow-u">위로</a>

        <a href="#" data-icon="arrow-d">아래로</a>

      </div>

    </div>

  </body>

</html>



출력 화면



8.   네비게이션 바




14-09.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>14-09</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

         <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>


  <body>

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

      <div data-role="header" data-position="fixed">

        <h3>header</h3>

        <a href="#" data-icon="gear" class="ui-btn-right">Options</a> 

        <div data-role="navbar">

          <ul>

            <li><a href="#">One</a></li>

            <li><a href="#">Two</a></li>

            <li><a href="#">Three</a></li>

          </ul>

        </div>

      </div>

      <div data-role="content">

        

      </div>

      <div data-role="footer" data-position="fixed">

        <div data-role="navbar">

          <ul>

            <li><a href="#" data-icon="grid">Summary</a></li>

            <li><a href="#" data-icon="star">Favs</a></li>

            <li><a href="#" data-icon="gear">Setup</a></li> 

          </ul>

        </div>

      </div>

    </div>

  </body>

</html>


출력 화면



반응형