-
[jquery mobile] 01컴퓨터/jQuery 2020. 1. 29. 15:06
<!-- jQuery Mobile은 HTML5에 최적화 되어 있기 때문에 doctype으로 HTML5를 사용한다 --> <!DOCTYPE html> <html> <head> <title>My Page</title> <!-- 모바일 디바이스를 위한 설정, 디바이스 폭에 맞게 웹 페이지를 열 것, 웹 페이지를 확대하지 말 것 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery mobile에서 사용하는 css, javascript. 아래 3개의 리소스를 로드해야 함 --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <!-- data-role는 jQuery mobile에서 해당 엘리먼트가 어떤 UI인지를 지정한다. 아래 page는 이 엘리먼트가 가장 큰 단위인 페이지임을 의미한다. --> <!-- page : 모든 시각적인 구성 요소를 포괄하는 단위 --> <div data-role="page"> <!-- 제목과 글로벌 메뉴를 표시하는 엘리먼트를 지정 --> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <!-- 컨텐츠가 표시되는 영역을 지정 --> <div data-role="content"> <p>Hello world</p> <!-- listview : 리스트 UI가 만들어진다 --> <!-- data-inset : 리스트가 전체를 차지하지 않게 한다 --> <!-- 위쪽에 filter item 검색 창이 떠서 간단하게 검색창을 만들 수 있다 --> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div><!-- /content --> </div><!-- /page --> </body> </html>출처 : 생활코딩
'컴퓨터 > jQuery' 카테고리의 다른 글
[jquery mobile] toolbar (0) 2020.01.29 [jquery mobile] 컴포넌트, page, 멀티페이지 템플릿, dialog (0) 2020.01.29 [jQuery] fadeIn, fadeOut (0) 2020.01.09 click event (0) 2020.01.06 두 번째 자식으로 넣기 (0) 2020.01.02