아이폰과 같은 스마트폰의 가장 기본적인 UI 구성은, 박스가 세로로 나열된 목록형태를 많이 띄고 있다
게임과 같은 엔터테인먼트 어플은 컨텐트의 특성상 독창적인 UI구성을 가지지만 설정화면과 같은 정적인 화면 구성은 대부분 아래와 같이 목록 형식으로 구성된다
따라서 목록형식은 가장 흔하게 사용되는 UI 구성이라 할 수 있으며 jQTouch 에서도 이를 지원하고 있다
기존 HTML 태그 중 '순서없는 목록'에 해당하는 ul 그리고 li 목록을 이용하여 아이폰 스타일의 UI를 손쉽게 구현할 수 있다.
기본 목록
아무런 치장없이 ul 태그와 li 태그만 간단히 정의해도 jQTouch에 의해 자동으로 아이폰 스타일의 변환된다
다음의 코드를 생각해 보자. HTML 태그로 순서 없는 목록을 정의하는 것이다
<ul><li>AAA</li><li>BBB</li><li>CCC</li></ul>
이 코드는 jQTouch 에 의해 아이폰 스타일로 자동 변환된다.
아래 화면은 일반 웹 화면과 jQTouch 결과 화면을 비교한 것이다
단지 목록만 정의했을 뿐인데, 이처럼 아이폰 스러운 화면을 만날 수 있다니, 매우 고마운 일이 아닐 수 없다
추가 목록
기본 목록을 그대로 사용해도 되지만 좀더 아이폰스럽고 미려한 UI를 위해 몇 가지 방법이 제공된다
jQTouch 에서는 ul 태그에 class 속성을 정의하도록 하여 목록의 스타일을 변화시키게 한다.
class 속성에 rounded, form , metal, individual, plastic, edgetoedge 등 5가지 서로 다른 스타일을 적용할 수 있다. 아래 화면은 'ul 의 class 속성'에 차례로 rounded, form, metal, individual 을 적용한 결과이다
rounded 는 둥근 모서리형태의 목록, form은 각지고 높이가 좀더 작은 목록, metal 은 메탈스러운 목록 마지막으로 individual 가로로 나열된 모습이다.
그리고 edgetoedge 각이 없는 딱딱한 사각형 모양의 스타일이며 하위 li 태그에 sep 속성을 부여해 다음과 같이 일종의 목록 그룹 효과를 줄 수 있다
목록 치장하기
목록의 전체 스타일이외에도 각각의 목록에 추가 스타일을 지정할 수 있다. 'li의 class 속성'으로 이를 지정할 수 있는데 아래 화면은 li의 class 속성에 arrow, forward를 각각 적용한 결과이다. 이 효과는 목록을 터치하면 추가 컨텐트가 존재함을 의미할 때 주로 사용된다
그리고 li 태그 안에 small 태그의 의 class 속성에 counter 를 부여하면 목록에 숫자를 추가할 수 있다
또한 목록 링크 이후 정의된 텍스트는 아래와 같이 밑글자로 처리된다. 아래 화면을 참조하자
마지막으로 글에서 설명된 목록 스타일을 한 페이지에 모두 적용해 보자
아래 화면은 코드를 실행한 결과화면이며 화면 이후 전체 코드를 제시한다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>jQTouch List Demo</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#">AAA</a><small class="counter">5</small></li>
<li class="forward"><a href="#">BBB</a><em>bbb</em></li>
</ul>
<ul class="metal">
<li class="arrow"><a href="#">AAA</a></li>
<li class="arrow"><a href="#">BBB</a></li>
</ul>
<ul class="form">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
<ul class="plastic">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
<ul class="individual">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
|---|---|
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (2) | 2010.10.07 |
