-
[jQuery] jQ Mobile 페이지(Pages) - jQuery Mobile 강좌Web/jQuery 2016. 3. 16. 18:50
W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.
아래 링크들은 Tutorial 편입니다.
jQuery Mobile Pages
Create a Page
아래 코드를 보면, 간단하고 표준적인 jQuery Mobile 페이지를 생성합니다:
* jqstd.html
12345678910111213141516171819202122232425262728<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><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.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>I Am Now A Mobile Developer!!</p></div><div data-role="footer"><h1>Footer Text</h1></div></div></body></html>cs 예제 설명:
- 속성 data-role="page"는 브라우저에서 표시되는 페이지 입니다.
- 속성 data-role="header"는 페이지의 상단에 툴바를 생성합니다.
- 속성 data-role="main"은 텍스트나 이미지, 버튼, 폼과 같은 페이지의 내용을 정의합니다.
- 클래스 ui-content는 페이지 내부의 패딩(padding)과 마진(margin)을 추가합니다.
- 속성 data-role="footer"는 페이지의 하단에 툴바를 생성합니다.
- 이 컨테이너 내부에는 절이나 이미지, 리스트 등의 어떤 HTML 엘리먼트든 추가할 수 있습니다.
Adding Pages in jQuery Mobile
jQuery Mobile에서, 단일 HTML 파일에서 여러 페이지를 생성 할 수 있습니다.
각 페이지를 고유의 ID로 구분하고 분리된 페이지를 각각 href 속성으로 연결합니다:
* jqtwopages.html
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><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.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>Welcome! If you click on the link below, it will take you to Page Two.</p><a href="#pagetwo">Go to Page Two</a></div><div data-role="footer"><h1>Footer Text</h1></div></div><div data-role="page" id="pagetwo"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>This is Page Two. If you click on the link below, it will take you to Page One.</p><a href="#pageone">Go to Page One</a></div><div data-role="footer"><h1>Footer Text</h1></div></div></body></html>cs Using Pages as Dialogs
다이얼로그 박스는 특별한 정보를 보이기 위하거나 입력을 요청하기 위해 사용되는 윈도우의 타입입니다.
사용자가 링크를 탭할 때 열리는 다이얼로그 박스를 생성하기 위해서는, 다이얼로그를 추가하고자 하는 페이지에 data-dialog="true"를 추가합니다:
* jqdialog.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><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.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>Welcome!</p><a href="#pagetwo">Go to Dialog Page</a></div><div data-role="footer"><h1>Footer Text</h1></div></div><div data-role="page" data-dialog="true" id="pagetwo"><div data-role="header"><h1>I'm A Dialog Box!</h1></div><div data-role="main" class="ui-content"><p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p><a href="#pageone">Go to Page One</a></div><div data-role="footer"><h1>Footer Text In Dialog</h1></div></div></body></html>cs
end* 본 포스트는 w3school 을 통해 작성된 포스트입니다.
'Web > jQuery' 카테고리의 다른 글
[jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌 (0) 2016.03.17 [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌 (0) 2016.03.17 [jQuery] jQ Mobile 버튼(Buttons) - jQuery Mobile 강좌 (0) 2016.03.16 [jQuery] jQ Mobile 시작하기 - jQuery Mobile 강좌 (0) 2016.03.16 [jQuery] 27. noConflict Method - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 26. AJAX get / post - jQuery 강좌 jQuery / CSE (0) 2015.06.13
