게임웹사이트운영 [11] 모바일 페이지 작성
1. 첫 모바일 페이지 : jq1.htm <!DOCTYPE html> <html> <head> <title>jQuery test HTML5</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html>
2. 페이지 추가 <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> <p><a href="#page2">Go to the Second Page</a></p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> <section id="page2" data-role="page"> <header data-role="header"><h1>jQeury Mobile Second Page Test</h1></header> <p>Second Page using HTML 5 tag</p><p></p> </body> </html>
3. Back버튼 추가 <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> <p><a href="#page2">Go to the Second Page</a></p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> <section id="page2" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQeury Mobile Second Page Test</h1></header> <p>Second Page using HTML 5 tag</p><p></p> </div> </body> </html>
4. 외부파일 연결하기 : jq-ex.htm <!DOCTYPE html> <html><head><title>jQuery test HTML5</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <section id="page4" data-role="page"> <header data-role="header"> <h1>External File Test</h1> </header> <div class="content" data-role="content"> <p>Hello External Page TEst</p> <p><a href="jq1.htm" rel="external">Go to the First Page</a></p> </div><footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html> <p>Second Page using HTML 5 tag</p> <p><a href="jq-ex.htm" rel="external">Go to External page</a></p>
5. 목록 뷰 만들기[1] : jq-list.htm <h3>Unordered List</h3> <!DOCTYPE html> <html><head><title>jQuery test HTML5</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> 여기에 목록 추가 </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html> <h3>Unordered List</h3> <ul data-role="listview"> <li>item</li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>
5. 목록 뷰 만들기[2]
6. 목록 뷰 버튼 만들기 <h3>Unordered List</h3> <ul data-role="listview"> <li><a href="#">item</a></li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>
7. 중첩 목록 뷰 만들기 : jq-list2.htm <h3>Nested List</h3> <ul data-role="listview"> <li>School of Creative Contents <ul> <li><a href="#">Game</a></li> <li><a href="#">Cartoon</a></li> <li><a href="#">Animation</a></li> </ul> </li> <li>Subjects <li><a href="#">Web Design</a></li> <li><a href="#">Game Test</a></li> <li><a href="#">Programming</a></li>
8. 썸네일 추가 25x16 <h3>Nested List</h3> <ul data-role="listview"> <li>School of Creative Contents <ul> <li><a href="#"><img src=“img/a.png“ class=“ui-li-icon”>Game</a></li> <li><a href="#">Cartoon</a></li> <li><a href="#">Animation</a></li> </ul> </li> <li>Subjects <li><a href="#">Web Design</a></li> <li><a href="#">Game Test</a></li> <li><a href="#">Programming</a></li> 25x16
9. 툴바 만들기 : jq-tool.htm <section id="page1" data-role="page"> <header data-role="header"> <h1>jQeury Mobile Tool</h1> <nav data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">First</a></li> <li><a href="#page2">Second</a></li> <li><a href="#page3">Third</a></li> </ul> </nav> </header> <div class="content" data-role="content"> <p> First Page </p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section>