language:jquery:jquery_mobile_basic

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

@@ 줄 1: / 줄 1: @@
+~~Title:jQuery Mobile 모바일~~
+{{section>language:jquery:jquery_문서_목록#jQuery_문서_목록&nofooter&noeditbtn}}
+====== jQueryMobile 포함하기 ======
+[[https://jquerymobile.com/download/|jquerymobile 다운로드]]에 가면 최신 버젼의 복붙용 코드 있음.
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Page Title</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
+  <script src="http://code.jquery.com/jquery-[version].min.js"></script>
+  <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
+</head>
+<body> ...content goes here... </body>
+</html>
+</code>
+===== 기본 단일 page 템플릿 =====
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+  <title>메인</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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>
+<style>
+</style>
+</head>
+<!-- END of head -->
+<body>
+  <div data-role="page">
+    <div data-role="header">
+      <h1>헤더</h1>
+    </div><!-- /header -->
+    <div role="main" class="ui-content">
+      <!-- 본문은 여기에 -->
+    </div><!-- /content -->
+    <div data-role="footer">
+      <h4>푸터</h4>
+    </div><!-- /footer -->
+  </div><!-- /page -->
+</body> <!-- END of body -->
+</html>
+</code>
+====== 그리드 grid ======
+  * [[https://demos.jquerymobile.com/1.4.5/grids/]]
+가로 그리드를 넣은 경우, 내부의 아이템을 자동을 판독하는 것은 아니고 개수에 맞게 클래스를 지정해줘야 한다.
+아래, 링크형 버튼을 2개 가로 배치한 것.
+<code html>
+<div class="ui-grid-a">
+  <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor1</a></div>
+  <div class="ui-block-b"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor2</a></div>
+</div>
+</code>
+  * **ui-grid-a** : 가로 2개
+  * **ui-grid-b** : 가로 3개
+  * **ui-grid-c** : 가로 4개
+====== 링크 방식, a 태그의 동작 ======
+  * ajax로 href에 설정된 페이지 내용을 읽어 온 다음, 화면을 갱신하는 방식으로 처리한다.
+  * 파일 링크를 걸어둔 경우, 바로 다운로드가 시작되지 않고 주소줄에 표시되기만 한다.
+일반 웹 방식으로 지정하기
+<code html>
+<a href="target_file" data-ajax="false">DOWNLOAD</a>
+</code>
+<nowiki>data-ajax="false"</nowiki> 속성을 주면 원래의 웹 방식으로 동작. 파일이면 바로 다운로드를 시작하고 웹페이지의 경우 해당 웹페이지를 읽어오기 시작한다.
+참고링크
+  * [[http://pgm-progger.blogspot.kr/2013/02/jquerymobile_20.html|jQueryMobile 링크방식]]
+  * [[http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html|PageLink]]