'Developer/JQueryMobile'에 해당하는 글 2건






[더 자세한 설명 필요시 댓글 달아주세요.]

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 &amp; 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 &amp; 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' 카테고리의 다른 글

[chater 1] 메인페이지.  (0) 2011.04.20
JQueryMobile 강좌 소개.  (1) 2011.04.20

WRITTEN BY
블로blow
iOS 개발자 생활이야기

트랙백  0 , 댓글  0개가 달렸습니다.
secret





안녕하세요 블로입니다.

강좌라고 까지 할건 없고, JQueryMobile Demo를 폰갭을 이용해서 직접 아이폰 어플로 만들어 보겠습니다.
그냥 웹에서 확인하는 것 보단, 직접 만들어가면서 하나하나 확인해 가는것이 공부하는데 좋을 것 같아서 해보기로 했습니다.

계획은 없고 조금씩 완성해 나가겠습니다. 

'Developer > JQueryMobile' 카테고리의 다른 글

[chater 1] 메인페이지.  (0) 2011.04.20
JQueryMobile 강좌 소개.  (1) 2011.04.20

WRITTEN BY
블로blow
iOS 개발자 생활이야기

트랙백  0 , 댓글  1개가 달렸습니다.
  1. 음식점들의 소극적 태도
secret