모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.
이번에는 jQuery Mobile의 리스트뷰에 검색기능을 추가해 보자. 리스트뷰를 구성하기 위한 ul 태그에 속성을 추가하는 것으로 훌륭한 검색항목과 기능이 생성된다. ul 태그에 data-filter 속성에 값을 true로 설정하고 data-filter-placeholder 속성에 검색어 입력 전에 표시될 문자열을 입력한다.
<ul data-role="listview" data-filter="true" data-filter-placeholder=" 검색어를 입력하세요">
아래는 전체 코드이다.
<!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">
<h1>검색 리스트뷰</h1>
</header>
<div class="content" data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="검색어를 입력하세요">
<li data-role="list-divider">
jQuery
<span class="ui-li-count">1</span>
<p class="ui-li-aside">Now</p>
</li>
<li>
<a href="#">
<img src="img/jquerymobile.jpg" alt="jQuery Mobile" />
<h3>jQuery Mobile</h3>
<p>jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크입니다.</p>
<p class="ui-li-aside">Good</p>
</a>
</li>
<li data-role="list-divider">
MEAN Stack
<span class="ui-li-count">4</span>
<p class="ui-li-aside">Wait</p>
</li>
<li>
<a href="#">
<img src="img/mongodb.jpg" alt="MongoDB" />
<h3>MongoDB</h3>
<p>JSON과 같은 형식으로 데이터를 저장하고 SQL과 유사한 쿼리를 수행 할 수 있는 문서 지향 NoSQL의 데이터베이스입니다.</p>
<p class="ui-li-aside">Good</p>
</a>
</li>
<li>
<a href="#">
<img src="img/angularjs.jpg" alt="AngularJS" />
<h3>AngularJS</h3>
<p>단일페이지와 데이터중심의 애플리케이션 작성을 용이하게 하는 자바스크립트 웹 프레임워크입니다.</p>
<p class="ui-li-aside">Not bad</p>
</a>
</li>
<li>
<a href="#">
<img src="img/express.jpg" alt="Express" />
<h3>Express</h3>
<p>NodeJS에서 실행되며 많이 사용되고 있는 웹 애플리케이션 프레임 워크입니다.</p>
<p class="ui-li-aside">Not bad</p>
</a>
</li>
<li>
<a href="#">
<img src="img/nodejs.jpg" alt="Node.js" />
<h3>Node.js</h3>
<p>Chrome의 V8 엔진을 사용해서 빠르고 쉬우며 확장가능한 네트워크 어플리케이션입니다.</p>
<p class="ui-li-aside">Best</p>
</a>
</li>
</ul>
</div>
<footer data-role="footer" data-position="fixed">
<h2>주한길</h2>
</footer>
</section>
</body>
</html>
결과화면
처음에는 전체항목이 표시된다.
검색어를 "M"을 입력하면 "M" 이 들어간 항목만 필터되어 표시된다.
jQuery Mobile과 MongoDB가 Node.js (설명에 "M"이 포함) 표시되었다.
검색어를 "Mo"을 입력하면 "Mo" 이 들어간 항목만 필터되어 표시된다.
jQuery Mobile과 MongoDB가 표시되었고 구분영역도 같이 표시되었다.
jQuery Mobile에서 알아둘 속성
- data-role="page | header | content | footer | controlgroup | navbar | listview | list-divider"
- 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"
- class="ui-li-count | ul-li-aside"
728x90
'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글
| [jQuery 모바일] 접을 수 있는 콘텐츠와 아코디언 (0) | 2023.02.11 |
|---|---|
| [jQuery 모바일] 화면을 구성하는 다양한 입력항목 (0) | 2023.02.11 |
| [jQuery 모바일] 리스트뷰에 다양한 정보를 표현해보자 (0) | 2023.02.11 |
| [jQuery 모바일] 리스트뷰 기본을 익혀보자 (0) | 2023.02.11 |
| [jQuery 모바일] 네비게이션바와 툴바를 페이지에 달아보자 (0) | 2023.02.11 |
댓글