위키
포럼
도구
바뀐글
랜덤

"JQuery Mobile 2페이지 파일분할"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 3명의 중간 판 22개는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{소문자}}
{{소문자}}
;jQuery모바일 여러 섹션, 여러 파일
;jQuery 모바일 여러 섹션, 여러 파일
;jQuery모바일 2페이지 파일분할
;jQuery 모바일 2페이지 파일분할
;jQuery모바일 외부 페이지 연결
;JQuery Mobile 2페이지 구성
;jQuery 모바일 외부 페이지 연결


==개요==
==개요==
*리스트뷰 링크를 누르면 hello 페이지와 world 페이지를 불러오는 구조
*리스트뷰 링크를 누르면 hello 페이지와 world 페이지를 불러오는 구조
*페이지 부분(header, content, footer)이 교체되고, header에 Back 버튼이 생긴다.
*페이지 부분(header, content, footer)이 교체되고, header에 Back 버튼이 생긴다.
*외부 페이지 태그는 div를 사용해도 되고, section, header, footer를 사용해도 된다.
*외부 페이지 태그는 div를 사용해도 되고, section, header, footer를 사용해도 된다.<ref>예제 코드 참조. hello 페이지는 div 태그를, world 페이지는 section, header, footer 태그를 사용했다. (단, content 태그는 없으므로 그대로 div 태그를 사용한다.)</ref>
*jQuery모바일에서 a 태그를 쓰면 클릭시에 링크된 페이지를 ajax 방식으로 읽어온다.<ref>page를 찾으면 그것을 읽어들이고, page 영역 바깥의 내용은 무시된다.</ref>
*jQuery모바일에서 a 태그를 쓰면 클릭시에 링크된 페이지를 ajax 방식으로 읽어온다.
:링크된 html문서에서 page 요소를 찾아 연결시킨다(page 영역 바깥의 내용은 무시된다).


==첫페이지==
==첫페이지==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
<html>
<html>
<head>
<head>
<title>웹앱</title>
<title>웹앱</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>
</head>
<body>  
<body>  
<div data-role="page">
 
<div data-role="header">
<section data-role="page">
<h1>메인메뉴 상단</h1>
  <header data-role="header"><h1>메인메뉴 상단</h1></header>
</div>
  <div data-role="content">
<div data-role="content">
    <div id="banner">
<div id="banner">
      <h2>메인메뉴</h2>
<h2>메인메뉴</h2>
    </div>
</div>
    <p>다람쥐 헌 쳇바퀴에 타고파.</p>
<p>다람쥐 헌 쳇바퀴에 타고파.</p>
    <ul data-role="listview" data-inset="true">
<ul data-role="listview" data-inset="true">
      <li><a href="external_page_hello.html">안녕</a></li>
<li><a href="external_page_hello.php">안녕</a></li>
      <li><a href="external_page_world.html">세상</a></li>
<li><a href="external_page_world.php">세상</a></li>
    </ul>
</ul>
  </div>
</div>
  <footer data-role="footer"><h4>메인메뉴 하단</h4></footer>
<div data-role="footer">
</section>
<h4>메인메뉴 하단</h4>
 
</div>
</div>
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>
*예제: http://zetawiki.com/ex/jquery-mobile/external_page.html


==hello 페이지 (div)==
==hello 페이지 (div)==
페이지, 헤더, 푸터로 div 태그를 사용한 예
페이지, 헤더, 푸터로 div 태그를 사용한 예
<source lang='html5'>
<syntaxhighlight lang='html5'>
<div data-role="page" id="hello">
<div data-role="page" id="hello">
<div data-role="header"><h1>안녕 상단</h1></div>
  <div data-role="header"><h1>안녕 상단</h1></div>
<div data-role="content">
  <div data-role="content">
<p>안녕 내용</p>
    <p>안녕 내용</p>
<p>div 태그 사용함</p>
    <p>div 태그 사용함</p>
</div>
  </div>
<div data-role="footer"><h4>안녕 하단</h4></div>
  <div data-role="footer"><h4>안녕 하단</h4></div>
</div>
</div>
</source>
</syntaxhighlight>
*예제: http://zetawiki.com/ex/jquery-mobile/external_page_hello.html


==world 페이지 (section)==
==world 페이지 (section)==
페이지는 section, 헤더는 header, 푸터는 footer 태그를 사용한 예
페이지는 section, 헤더는 header, 푸터는 footer 태그를 사용한 예
<source lang='html5'>
<syntaxhighlight lang='html5'>
<section data-role="page" id="world_page">
<section data-role="page" id="world_page">
<header data-role="header"><h1>세상 상단</h1></header>
  <header data-role="header"><h1>세상 상단</h1></header>
<div data-role="content">
  <div data-role="content">
<p>세상 내용</p>
    <p>세상 내용</p>
<p>section, header, footer 태그 사용함</p>
    <p>section, header, footer 태그 사용함</p>
</div>
  </div>
<footer data-role="footer"><h4>세상 하단</h4></footer>
  <footer data-role="footer"><h4>세상 하단</h4></footer>
</section>
</section>
</source>
</syntaxhighlight>
 
*예제: http://zetawiki.com/ex/jquery-mobile/external_page_world.html
*예제: http://jmnote.com/jqm/external_page.php


==같이 보기==
==같이 보기==
80번째 줄: 81번째 줄:
<references/>
<references/>


[[분류:JQuery 모바일]]
[[분류:JQuery Mobile]]

2020년 11월 2일 (월) 02:53 기준 최신판

jQuery 모바일 여러 섹션, 여러 파일
jQuery 모바일 2페이지 파일분할
JQuery Mobile 2페이지 구성
jQuery 모바일 외부 페이지 연결

1 개요[ | ]

  • 리스트뷰 링크를 누르면 hello 페이지와 world 페이지를 불러오는 구조
  • 페이지 부분(header, content, footer)이 교체되고, header에 Back 버튼이 생긴다.
  • 외부 페이지 태그는 div를 사용해도 되고, section, header, footer를 사용해도 된다.[1]
  • jQuery모바일에서 a 태그를 쓰면 클릭시에 링크된 페이지를 ajax 방식으로 읽어온다.
링크된 html문서에서 page 요소를 찾아 연결시킨다(page 영역 바깥의 내용은 무시된다).

2 첫페이지[ | ]

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<title>웹앱</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>
<body> 

<section data-role="page">
  <header data-role="header"><h1>메인메뉴 상단</h1></header>
  <div data-role="content">
    <div id="banner">
      <h2>메인메뉴</h2>
    </div>
    <p>다람쥐 헌 쳇바퀴에 타고파.</p>
    <ul data-role="listview" data-inset="true">
      <li><a href="external_page_hello.html">안녕</a></li>
      <li><a href="external_page_world.html">세상</a></li>
    </ul>
  </div>
  <footer data-role="footer"><h4>메인메뉴 하단</h4></footer>
</section>

</body>
</html>

3 hello 페이지 (div)[ | ]

페이지, 헤더, 푸터로 div 태그를 사용한 예 

<div data-role="page" id="hello">
  <div data-role="header"><h1>안녕 상단</h1></div>
  <div data-role="content">
    <p>안녕 내용</p>
    <p>div 태그 사용함</p>
  </div>
  <div data-role="footer"><h4>안녕 하단</h4></div>
</div>

4 world 페이지 (section)[ | ]

페이지는 section, 헤더는 header, 푸터는 footer 태그를 사용한 예 

<section data-role="page" id="world_page">
  <header data-role="header"><h1>세상 상단</h1></header>
  <div data-role="content">
    <p>세상 내용</p>
    <p>section, header, footer 태그 사용함</p>
  </div>
  <footer data-role="footer"><h4>세상 하단</h4></footer>
</section>

5 같이 보기[ | ]

6 주석[ | ]

  1. ↑ 예제 코드 참조. hello 페이지는 div 태그를, world 페이지는 section, header, footer 태그를 사용했다. (단, content 태그는 없으므로 그대로 div 태그를 사용한다.)
원본 주소 "https://zetawiki.com/w/index.php?title=JQuery_Mobile_2페이지_파일분할&oldid=607340"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}