jQuery Mobile 3

jQuery Mobile 리스트

앞에서 잠시 ul 태그의 data-role 속성을 listview로 입력한 형태를 살펴보았습니다. ul 태그나 ol태그 같은 리스트 태그의 data-role 속성을 listview로 입력하면 아이폰의 리스트와 같은 모습으로 바꿔줍니다.

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>Mobile</h1>
									</div>
									<div data-role="content">
										<ul data-role="Listview">
											<li><a href="#">List Item 1</a></li>
											<li><a href="#">List Item 2</a></li>
											<li><a href="#">List Item 3</a></li>
											<li><a href="#">List Item 4</a></li>
										</ul>
									</div>
								</div>
							</body>							
						

리스트 안에는 리스트의 요소를 구분하는 구분자가 있습니다. jQuery Mobile에서 구분자를 만들려면 아래의 소스코드처럼 li 태그의 data-role 속성값을 list-divider로 입력합니다.

							<div data-role="content" id="first_page">
								<ul data-role="Listview">
									<li data-role="list-divider">Divider</li>
									<li><a href="#">List Item 1</a></li>
									<li><a href="#">List Item 2</a></li>
									<li data-role="list-divider">Divider</li>
									<li><a href="#">List Item 3</a></li>
									<li><a href="#">List Item 4</a></li>
									<li><a href="#">List Item 5</a></li>
									<li><a href="#">List Item 6</a></li>
									<li data-role="list-divider">Divider</li>
									<li><a href="#">List Item 7</a></li>
									<li><a href="#">List Item 8</a></li>
									<li><a href="#">List Item 9</a></li>
									<li><a href="#">List Item 10</a></li>
								</ul>
							</div>					
						

실행하면 중간에 리스트를 구분하는 구분자가 표시됩니다.

리스트를 하나의 그룹으로 구분하고 싶을 때는 data-inset 속성을 true로 입력합니다. 기본 설정은 false이므로 따로 입력할 필요가 없습니다. 또한 아래의 코드처럼 a 태그 안에 h3 태그와 p태그를 넣으면 자동으로 리스트의 요소에 제목과 내용이 지정됩니다.

							<ul data-role="Listview" data-inset="true">
								<li data-role="list-divider">Divider</li>
								<li>
									<a href="#">
										<h3>List Item 1</h3>
										<p>Lorem ipsum</p>
									</a>
								</li>
							</ul>			
						

이 외에도 span 태그의 class 속성에 아래의 코드처럼 ul-li-aside 와 ul-li-count를 입력하면 자동으로 리스트 요소에 추가 설정과 카운터가 붙습니다.

							<ul data-role="Listview" data-inset="true">
								<li data-role="list-divider">Divider</li>
								<li>
									<a href="#">
										<h3>List Item 1</h3>
										<p>Lorem ipsum</p>
										<span class="ul-li-aside">Aside</span>
										<span class="ul-li-count">52</span>
									</a>
								</li>
							</ul>	
						

리스트에 이미지를 넣고 싶을 때는 곧바로 img 태그를 넣어줍니다. img 태그를 넣으면 jQuery Mobile이 자동으로 이미지를 80*80의 크기로 변경해 삽입합니다. 또한, 리스트의 오른쪽에 있는 화살표를 다른 이미지로 바꾸고, 다른 기능을 수행하려면 아래의 코드처럼 a 태그를 하나 더 생성합니다. 이때 data-icon 속성을 입력하면 아이콘을 줄 수 있습니다.

							<ul data-role="Listview" data-inset="true">
								<li data-role="list-divider">Divider</li>
								<li>
									<a href="#">
										<img src="logo_thumbnail.png" alt="" />
										<p>Lorem ipsum</p>
										<span class="ul-li-aside">Aside</span>
										<span class="ul-li-count">52</span>
									</a>
									<a href="#" data-icon="search"></a>
								</li>
							</ul>
						

상기 소스를 실행한 리스트가 jQuery Mobile이 생성할 수 있는 가장 복잡한 형태입니다.

마지막으로 리스트의 data-filter 속성을 알아 봅시다. 기본적으로 data-filter 속성은 false입니다. 아래의 코드처럼 data-filter 속성을 true로 입력하면 리스트의 요소를 검색하는 검색어 입력창을 만들 수 있습니다.

							<ul data-role="Listview" data-inset="true" data-filter="true">
								<li data-role="list-divider">Divider</li>
								<li><a href="#">List Item 1</a></li>
								<li><a href="#">List Item 2</a></li>
								<li data-role="list-divider">Divider</li>
								<li><a href="#">List Item 3</a></li>
								<li><a href="#">List Item 4</a></li>
								<li><a href="#">List Item 5</a></li>
								<li><a href="#">List Item 6</a></li>
							</ul>
						

리스트와 관련된 요소를 모두 살펴보았습니다. 자바스크립트로 리스트의 요소를 동적으로 추가했을 때는 리스트와 관련된 메서드를 실행해 리스트를 다시 구성해야 합니다.



jQuery Mobile 아이콘

이전에 data-icon 속성에 대해서 잠시 살펴봤습니다. jQuery Mobile은 자체적으로 18개의 아이콘을 지원합니다.

  1. arrow-l
  2. arrow-r
  3. arrow-u
  4. arrow-d
  5. delete
  6. plus
  7. minus
  8. check
  9. gear
  10. refresh
  11. forward
  12. back
  13. grid
  14. star
  15. alert
  16. info
  17. home
  18. search

jQuery Mobile의 아이콘은 위의 표와 같은 이름을 가지고 있습니다. data-icon 속성의 값을 입력해서 확인해 보세요.