jQuery | javascript | CSS
jQuery Mobile - 04.toolbar (Header, footer)
Godffs
2012. 9. 13. 01:48
반응형
Header 바
- 페이지 상단 툴바로 페이지 타이틀과 페이지 네비게이션 으로 좌,우측 버튼이 많이 사용됩니다.
| Header 바 |
| <!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"> <h2>Header</h2> <a href="#" data-icon="arrow-l">이전</a> <a href="#" data-icon="arrow-r">다음</a> </div> <div data-role="content"> </div> </div> </body> </html>  |
footer 바
- 페이지 하단에 위치된 툴바로 여러개의 버튼을 담을 수 있습니다.
| footer 바 |
| <!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"> <h2>Header</h2> </div> <div data-role="content"> </div> <div data-role="footer" data-position="fixed" class="ui-bar"> <a href="#" data-role="button" data-icon="arrow-u">UP</a> <a href="#" data-role="button" data-icon="arrow-d">DOWN</a> </div> </div> </body> </html>  |
기타...
네비게이션바
반응형