위키
포럼
도구
바뀐글
랜덤

"JQuery Mobile 시작하기"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 2명의 중간 판 8개는 보이지 않습니다)
9번째 줄: 9번째 줄:


<img src='http://demos.jquerymobile.com/1.4.0/_assets/img/jquery-logo.png' style='width:200px' />
<img src='http://demos.jquerymobile.com/1.4.0/_assets/img/jquery-logo.png' style='width:200px' />
==example01.php==
<source lang='html5'>
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<title>안녕 친구들</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>내용 없음</body>
</html>
</source>
*데모: http://jmnote.com/jqm/example01.php


==example02.php==
==example02.php==
<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="page">
    <div data-role="header">
  <div data-role="header">
        <h1>헤더</h1>
    <h1>헤더</h1>
    </div>
  </div>
    <div data-role="content">
  <div data-role="content">
        <div id="banner">
    <div id="banner">
            <h2>배너</h2>
      <h2>배너</h2>
        </div>
        <p>다람쥐 헌 쳇바퀴에 타고파.</p>
        <ul data-role="listview" data-inset="true">
            <li><a href="#">안녕</a></li>
            <li><a href="#">친구들</a></li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>푸터</h4>
     </div>
     </div>
    <p>다람쥐 헌 쳇바퀴에 타고파.</p>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">안녕</a></li>
      <li><a href="#">친구들</a></li>
    </ul>
  </div>
  <div data-role="footer">
    <h4>푸터</h4>
  </div>
</div>
</div>
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>
*데모: http://jmnote.com/jqm/example02.php
*예제: http://zetawiki.com/ex/jquery-mobile/example02.php


==같이 보기==
==같이 보기==
*[[jQuery 모바일 2페이지]]
*[[jQuery Mobile 2페이지 구성]]
*[[jQuery Mobile 최신 버전 사용]]
*[[jQuery Mobile 최신 버전 사용]]
*[[HTML5 기본 형태]]
*[[HTML5 기본 형태]]
68번째 줄: 52번째 줄:
*[[자바스크립트 라이브러리]]
*[[자바스크립트 라이브러리]]


[[분류:JQuery 모바일]]
[[분류:JQuery Mobile]]
[[분류:튜토리얼]]

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

1 개요[ | ]

jQuery 모바일 시작하기
jQuery 모바일 튜토리얼

HTML문서에서 jQuery모바일을 사용하려면 다음 3가지를 추가해야 한다.

  • jQuery 자바스크립트
  • jQuery모바일 자바스크립트
  • jQuery모바일 CSS

<img src='http://demos.jquerymobile.com/1.4.0/_assets/img/jquery-logo.png' style='width:200px' />

2 example02.php[ | ]

<!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> 
<div data-role="page">
  <div data-role="header">
    <h1>헤더</h1>
  </div>
  <div data-role="content">
    <div id="banner">
      <h2>배너</h2>
    </div>
    <p>다람쥐 헌 쳇바퀴에 타고파.</p>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">안녕</a></li>
      <li><a href="#">친구들</a></li>
    </ul>
  </div>
  <div data-role="footer">
    <h4>푸터</h4>
  </div>
</div>
</body>
</html>

3 같이 보기[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=JQuery_Mobile_시작하기&oldid=607345"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}