모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.
이번에는 jQuery Mobile에서 표현할 수 있는 여러 가지 버튼과 리스트에 대해서 알아보자. 아래의 코드는 작은 원형의 버튼을 표시한다. 각각의 class 를 보면 -plus, -minus, -delete, -check에 따라 해당하는 모양이 표시된다.
<div class="ui-nodisc-icon">
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext ui-btn-b ui-btn-inline">Plus</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-minus ui-btn-icon-notext ui-btn-b ui-btn-inline">Minus</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-b ui-btn-inline">Delete</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-check ui-btn-icon-notext ui-btn-b ui-btn-inline">Check</a>
</div>
class에 ui-grid-a 값을 두면 2단으로 표시하고 class에 ui-grid-b 값을 두면 3단으로 표시한다. 그리고 ui-block-a, b, c, ...... 순서로 칼럼의 위치를 나타낸다.
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="button" value="버튼1">
</div>
<div class="ui-block-b">
<input type="reset" value="버튼2">
</div>
</fieldset>
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" value="버튼1">
</div>
<div class="ui-block-b">
<input type="reset" value="버튼2">
</div>
<div class="ui-block-c">
<input type="submit" value="버튼3">
</div>
</fieldset>
아래의 코드는 제목과 본문을 표시할때 사용하는 코드이다. classs에 값을 설정하면 제목을 나타낼 때와 본문을 나타낼 때에 표시할 수 있다.
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>제목입니다</h3>
</div>
<div class="ui-body ui-body-a">
<p>본문내용입니다</p>
</div>
</div>
아래의 코드는 정적리스트를 표시하는 코드이다. 정적리스트는 단순히 표시를 목적으로 하며 클릭을 할 수 없다.
<ul data-role="listview" data-inset="true">
<li>정적리스트1</li>
<li data-role="list-divider">구분자</li>
<li>정적리스트2<span class="ui-li-count">3</span></li>
<li>정적리스트3<span class="ui-li-count">6</span></li>
</ul>
아래의 코드는 동적리스트를 표시하는 코드이다. 동적리스트는 값을 표시하고 클릭이 가능하다.
<ul data-role="listview" data-inset="true">
<li><a href="#">동적리스트1</a></li>
<li data-role="list-divider">구분자</li>
<li><a href="#">동적리스트2<span class="ui-li-count">4</span></a></li>
<li><a href="#">동적리스트3<span class="ui-li-aside">New</span></a></li>
</ul>
아래는 전체 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<section id="page1" data-role="page" data-add-back-btn="true" data-theme="b">
<header data-role="header" data-position="fixed">
<h1>버튼과 리스트</h1>
</header>
<div class="content" data-role="content">
<div class="ui-nodisc-icon">
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext ui-btn-b ui-btn-inline">Plus</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-minus ui-btn-icon-notext ui-btn-b ui-btn-inline">Minus</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-b ui-btn-inline">Delete</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-check ui-btn-icon-notext ui-btn-b ui-btn-inline">Check</a>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="button" value="버튼1">
</div>
<div class="ui-block-b">
<input type="reset" value="버튼2">
</div>
</fieldset>
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" value="버튼1">
</div>
<div class="ui-block-b">
<input type="reset" value="버튼2">
</div>
<div class="ui-block-c">
<input type="submit" value="버튼3">
</div>
</fieldset>
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>제목입니다</h3>
</div>
<div class="ui-body ui-body-a">
<p>본문내용입니다</p>
</div>
</div>
<ul data-role="listview" data-inset="true">
<li>정적리스트1</li>
<li data-role="list-divider">구분자</li>
<li>정적리스트2<span class="ui-li-count">3</span></li>
<li>정적리스트3<span class="ui-li-count">6</span></li>
</ul>
<ul data-role="listview" data-inset="true">
<li><a href="#">동적리스트1</a></li>
<li data-role="list-divider">구분자</li>
<li><a href="#">동적리스트2<span class="ui-li-count">4</span></a></li>
<li><a href="#">동적리스트3<span class="ui-li-aside">New</span></a></li>
</ul>
</div>
<footer data-role="footer" data-position="fixed">
<h2>주한길</h2>
</footer>
</section>
</body>
</html>
결과 화면
jQuery Mobile에서 알아둘 속성
- data-role="page | header | content | footer | controlgroup | navbar | listview | list-divider | slider | collapsible | collapsible-set"
- data-theme="a | b | c"
- data-position="fixed"
- data-transition="fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none"
- data-add-back-btn="true | false"
- data-rel="dialog | popup | back | external"
- data-icon="home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false"
- data-inline="true | false"
- data-mini ="true | false"
- data-corners="true | false"
- data-shadow="true | false"
- data-type="horizontal | vertical"
- data-inset="true | false"
- data-filter="true | false"
- data-filter-placeholder="value"
- data-native-menu="false"
- class="ui-li-count | ul-li-aside"
728x90
'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글
| [jQuery 모바일] 목록 테이블과 컬럼표시 연동 (0) | 2023.02.11 |
|---|---|
| [jQuery 모바일] 펼치기,접기와 몇가지팁 (0) | 2023.02.11 |
| [jQuery 모바일] 여러가지 선택항목 (Select, Radio, Checkbox) (0) | 2023.02.11 |
| [jQuery 모바일] 여러가지 다양한 항목들 (0) | 2023.02.11 |
| [jQuery 모바일] 접을 수 있는 콘텐츠와 아코디언 (0) | 2023.02.11 |
댓글