티스토리 뷰

프로그램/미분류

jQuery 를 이용한 간단한 Mobile Web 예제

구서기 2012. 2. 28. 15:25

ㅁ 가장 기초적인것이 가장 쉽게 잊는다는 사실을 상기하며

ㅁ 한문서에 여러페이지를 다루는 예문

[test.html 예문]

 

<HEAD>

<LINK rel=stylesheet href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<SCRIPT src="http://code.jquery.com/jquery-1.5.2.min.js"></SCRIPT>
<SCRIPT src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></SCRIPT>

 

<!-- 첫페이지 -->
<SECTION id=page1 data-role="page">
<DIV data-role="header"> <H1>First App</H1> </DIV>
<DIV data-role="content">
<P>안녕하세요! - 첫번째 페이지</P>
<P> <A href="http://hks003.tistory.com/admin/entry/post/?id=84#page2"> Go to the second page! </A></P>
</DIV>
<DIV data-role="footer"> <H2>jQuery Mobile</H2> </DIV>
</SECTION>

 

<!-- 두번째 페이지 -->
<SECTION id=page2 data-role="page">
<DIV data-role="header"> <H1>First App</H1> </DIV>
<DIV data-role="content">
<P>안녕하세요! 두번째 페이지</P>
<P> <A href="http://hks003.tistory.com/admin/entry/post/?id=84#page3"> Go to the third page! </A></P>
</DIV>
<DIV data-role="footer"> <H2>jQuery Mobile</H2> </DIV>
</SECTION>

 

<!-- 세번째 페이지 -->
<SECTION id=page3 data-role="page">
<DIV data-role="header"> <H1>First App</H1> </DIV>
<DIV data-role="content">
<P>안녕하세요! 세번째 페이지</P>
<P> <A href="http://hks003.tistory.com/admin/entry/post/?id=84#page1"> Go back to the First page! </A></P>

</DIV>
<DIV data-role="footer"> <H2>jQuery Mobile</H2> </DIV>
</SECTION>


ㅁ 2번째 라인의 <meta charset="euc-kr"> 이부분이 없으면 한글이 깨지네요!
ㅁ 한줄씩 작성할때는 몰랐는데 작성해놓고 보니 참 복잡해보이네요! 가독성이 영~~ ... 앞으로 어찌해야하나.... 기냥 flex로? ㅡ.,ㅡ


실제 스마트폰으로 한번 볼까! ^^











실행예


'Goole 크롬' 에서 스마트기기와 가장 근접한 화면이 나온다.

 

저작자표시

'프로그램 > 미분류' 카테고리의 다른 글

QT 다운로드 및 설치, 실행  (0) 2016.06.10
Color Scripter 사용을 위한 테스트  (0) 2016.02.17
ipTIME N704N 포트포워딩 및 DDNS설정  (1) 2013.11.27
Windows 7에서 원격 데스크톱 연결 방법 (mstsc /console)  (0) 2013.10.18
RS485컨버터로 RS422 통신하기위한 배선방법  (0) 2013.09.24