모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.
이번에는 접을 수 있는 콘텐츠와 아코디언을 만들어 보자. 접을 수 있는 콘텐츠는 div 태그의 data-role 속성에 collapsible 값을 주면 된다. 그리고 div 태그 안에 제목을 나타내기 위한 <h1>, <h2>, <h3>...... 와 같은 태그와 설명을 나타내는 <p> 태그를 구성하면 된다.
<div data-role="collapsible">
<h3>jQuery Mobile</h3>
<p>jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, ...(중략)...계된 HTML5 기반 프레임워크입니다. </p>
</div>
그리고 data-collapsed 속성에 false 값을 주면 처음 표시할 때 펼쳐서 보인다.
<div data-role="collapsible" data-collapsed="false">
접을 수 있는 콘텐츠를 구성하는 것을 알고 있으면 아코디언을 만드는 것도 어렵지 않다. 여러개 접을 수 있는 콘텐츠를 <div data-role="collapsible-set">로 감싸기만 하면 아코디언이 완성된다.
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>MongoDB</h3>
<p>JSON과 같은 형식으로 데이터를 저장하고 ...(중략)... 있는 문서 지향 NoSQL의 데이터베이스입니다. </p>
</div>
<div data-role="collapsible">
<h3>AngularJS</h3>
<p>단일페이지와 데이터중심의 애플리케이션 작성을 용이하게 하는 자바스크립트 웹 프레임워크입니다. </p>
</div>
<div data-role="collapsible">
<h3>Express</h3>
<p>NodeJS에서 실행되며 많이 사용되고 있는 웹 애플리케이션 프레임 워크입니다. </p>
</div>
<div data-role="collapsible">
<h3>Node.js</h3>
<p>Chrome의 V8 엔진을 사용해서 빠르고 쉬우며 확장가능한 네트워크 어플리케이션입니다.</p>
</div>
</div>
아래는 전체 코드이다.
<!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">
<header data-role="header" data-position="fixed">
<h1>Collapsible</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1">Collapsible</a></li>
<li><a href="#page2">Accordion</a></li>
</ul>
</div>
</header>
<div class="content" data-role="content">
<div data-role="collapsible">
<h3>jQuery Mobile</h3>
<p>jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크입니다.</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>MongoDB</h3>
<p>JSON과 같은 형식으로 데이터를 저장하고 SQL과 유사한 쿼리를 수행 할 수 있는 문서 지향 NoSQL의 데이터베이스입니다.</p>
</div>
</div>
<footer data-role="footer" data-position="fixed">
<h2>주한길</h2>
</footer>
</section>
<section id="page2" data-role="page" data-add-back-btn="true">
<header data-role="header" data-position="fixed">
<h1>Accordion</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1">Collapsible</a></li>
<li><a href="#page2">Accordion</a></li>
</ul>
</div>
</header>
<div class="content" data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>MongoDB</h3>
<p>JSON과 같은 형식으로 데이터를 저장하고 SQL과 유사한 쿼리를 수행 할 수 있는 문서 지향 NoSQL의 데이터베이스입니다.</p>
</div>
<div data-role="collapsible">
<h3>AngularJS</h3>
<p>단일페이지와 데이터중심의 애플리케이션 작성을 용이하게 하는 자바스크립트 웹 프레임워크입니다.</p>
</div>
<div data-role="collapsible">
<h3>Express</h3>
<p>NodeJS에서 실행되며 많이 사용되고 있는 웹 애플리케이션 프레임 워크입니다.</p>
</div>
<div data-role="collapsible">
<h3>Node.js</h3>
<p>Chrome의 V8 엔진을 사용해서 빠르고 쉬우며 확장가능한 네트워크 어플리케이션입니다.</p>
</div>
</div>
</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 모바일] 여러가지 선택항목 (Select, Radio, Checkbox) (0) | 2023.02.11 |
|---|---|
| [jQuery 모바일] 여러가지 다양한 항목들 (0) | 2023.02.11 |
| [jQuery 모바일] 화면을 구성하는 다양한 입력항목 (0) | 2023.02.11 |
| [jQuery 모바일] 검색 리스트뷰의 놀라운 기능 (0) | 2023.02.11 |
| [jQuery 모바일] 리스트뷰에 다양한 정보를 표현해보자 (0) | 2023.02.11 |
댓글