반응형
버튼을 클릭시 페이지 이동하는 예제입니다.
<a> 태그를 사용해서 페이지를 이동하는데요. 보통 <a>태그를 사용해서 페이지를 이동하게 되면
페이지가 새로고침으로 되는데요. jQuery Mobile에서는 부드럽체 페이지가 이동됩니다.
처음 열리게 되는 페이지에 jQuery Mobile 스크립트와 프레임워크 등 설정해줬는데요.
HTML 태그에서 파일을 링크하게 되면 다른 페이지에서도 자동으로 통합됩니다.
| 첫번째 페이지 mainpage.htm |
| <!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="euc-kr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/> <link rel="shortcut icon" href="../FrameWork/images/icons-18-black.png" /> <link rel="apple-touch-icon" href="../FrameWork/images/icons-18-black.png" /> <link href="../framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" /> <script src="../framework/jquery-1.6.4.js"></script> <script src="../framework/jquery.mobile-1.0.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> 반갑습니다. 같이 공부해요. <a href="login_page.htm" data-role="button">로그인</a> </div> </div> </body> </html>  |
| 두번째 페이지 login_page.htm |
| <!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="euc-kr" /> </head> <body> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> <a href="#" data-role="button" data-rel="back">이전</a> </div> <div data-role="content"> 로그인 페이지 입니다.<br /> 상단에 이전 버튼 클릭하시면<br /> 이전 페이지로 이동됩니다. </div> </div> </body> </html>  |
jQuery Mobile 웹앱은 단일 HTML 문서로 동작됩니다.
페이지 이동시에 내부 링크로도 가능합니다.
다이얼로그로 띄우고 싶은 경우에는
<a href="login_page.htm" data-rel="dialog" data-role="button">로그인</a>
data-rel="dialog" 속성을 추가해주시면 됩니다.
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| jQuery Mobile - 04.toolbar (Header, footer) (0) | 2012.09.13 |
|---|---|
| jQuery Mobile - 03.버튼의 종류 (0) | 2012.09.12 |
| jQuery Mobile - 01.jQuery Mobile 시작 (1) | 2012.09.10 |
| jQuery Mobile - 00. Visual Studio 2010에서 jQuery Mobile 기본 구성 프로젝트 (0) | 2012.09.10 |
| HTML5 기본 태그 (0) | 2012.09.02 |
Comments