JQueryMobile을 쓰기 위해서 Head에 다음과 같이 script와 css를 추가합니다.
<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>
Body부분에 타이틀로 보여질 부분은,
<div id="jqm-homeheader">
<h1 id="jqm-logo"><imgsrc="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
<p>직접 만들어보는 JQuerySample</p>
</div>
이렇게 해서 이미지와 글을 보여줍니다.
아래에 하나씩 선택할 리스트는 다음과 같이 만들어줍니다.
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">Overview</li>
<li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="docs/about/features.html">Features</a></li>
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
</ul>ul에 data-role은 listview로 하고요, data-inset=true로 하고 data-thema와 data-dividertheme를 정합니다.
종합적인 소스는 아래와 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>JQuerySample</title>
<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>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" data-theme="b" id="jqm-home">
<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
<p>직접 만들어보는 JQuerySample</p>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">Overview</li>
<li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="docs/about/features.html">Features</a></li>
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="b">
<li data-role="list-divider">API</li>
<li><a href="docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="docs/api/events.html">Events</a></li>
<li><a href="docs/api/methods.html">Methods & Utilities</a></li>
<li><a href="docs/api/mediahelpers.html">Responsive Layout</a></li>
<li><a href="docs/api/themes.html">Theme framework</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
<li data-role="list-divider">Components</li>
<li><a href="docs/pages/index.html">Pages & dialogs</a></li>
<li><a href="docs/toolbars/index.html">Toolbars</a></li>
<li><a href="docs/buttons/index.html">Buttons</a></li>
<li><a href="docs/content/index.html">Content formatting</a></li>
<li><a href="docs/forms/index.html">Form elements</a></li>
<li><a href="docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</body>
</html>스샷은 다음과 같습니다.
'Developer > JQueryMobile' 카테고리의 다른 글
| JQueryMobile 강좌 소개. (1) | 2011.04.20 |
|---|