내용으로 건너뛰기
긴스 위키 (GINS WIKI)
tag
사용자 도구
로그인
사이트 도구
도구
문서 보기
이전 판
Fold/unfold all
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
현재 위치:
긴스 위키 GINS wiki
»
개발 언어
»
jquery
»
jQuery Mobile 모바일
추적:
검색
language:jquery:jquery_mobile_basic
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
~~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]]
language/jquery/jquery_mobile_basic.txt
· 마지막으로 수정됨: 2022/12/07 22:30 저자
kieuns
문서 도구
문서 보기
이전 판
역링크
Fold/unfold all
맨 위로