List view

List view란?

여러개의 항목을 열거할 때 사용한다. jQuery Mobile은 다양한 리스트 형식을 지원하고 있다. 리스트 형식은 ul이나 ol 엘리먼트를 이용한다. 이 엘리먼트에 대한 자세한 설명은 생활코딩의 HTML 수업 리스트 편을 참고한다. http://opentutorials.org/course/11/67

List view의 종류

기본

ul 엘리먼트를 이용하면 자동으로 list view를 만들어준다. ul 엘리먼트를 ol엘리먼트로 바꿔주면 리스트에 숫자가 붙는 numbered lists가 만들어진다.

<ul data-role="listview" data-theme="g">
	<li><a href="acura.html">Acura</a></li>
	<li><a href="audi.html">Audi</a></li>
	<li><a href="bmw.html">BMW</a></li>
</ul>

전체소스
결과 : http://jquerymobile.com/demos/1.1.0/docs/lists/lists-ul.html

Nested list

ul/ol 엘리먼트 하위에 다시 ul/ol 엘리먼트가 등장하면 jQuery Mobile은 이를 별도의 페이지도 자동으로 재구성한다.

		<ul data-role="listview">
			<li>
				<h3>Animals</h3>
				<p>All your favorites from aarkvarks to zebras.</p>
			
				<ul>
					<li>Pets
						<ul>
							<li><a href="index.html">Canary</a></li>
							<li><a href="index.html">Cat</a></li>
							<li><a href="index.html">Dog</a></li>
							<li><a href="index.html">Gerbil</a></li>
							<li><a href="index.html">Iguana</a></li>
							<li><a href="index.html">Mouse</a></li>
						</ul>
					</li>
					<li>Farm animals
						<ul>
							<li><a href="index.html">Chicken</a></li>
							<li><a href="index.html">Cow</a></li>
							<li><a href="index.html">Duck</a></li>
							<li><a href="index.html">Horse</a></li>
							<li><a href="index.html">Pig</a></li>
							<li><a href="index.html">Sheep</a></li>
						</ul>
					</li>
					<li>Wild animals
						<ul>
							<li><a href="index.html">Aardvark</a></li>
							<li><a href="index.html">Alligator</a></li>
							<li><a href="index.html">Ant</a></li>
							<li><a href="index.html">Bear</a></li>
							<li><a href="index.html">Beaver</a></li>
							<li><a href="index.html">Cougar</a></li>
							<li><a href="index.html">Dingo</a></li>
							<li><a href="index.html">Eagle</a></li>
							<li><a href="index.html">Elephant</a></li>
							<li><a href="index.html">Ferret</a></li>
							<li><a href="index.html">Frog</a></li>
							<li><a href="index.html">Giraffe</a></li>
							<li><a href="index.html">Lion</a></li>
							<li><a href="index.html">Monkey</a></li>
							<li><a href="index.html">Panda bear</a></li>
							<li><a href="index.html">Polar bear</a></li>
							<li><a href="index.html">Tiger</a></li>
							<li><a href="index.html">Zebra</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>

				<h3>Colors</h3>
				<p>Fresh colors from the magic rainbow.</p>
	
				<ul>
					<li><a href="index.html">Blue</a></li>
					<li><a href="index.html">Green</a></li>
					<li><a href="index.html">Orange</a></li>
					<li><a href="index.html">Purple</a></li>
					<li><a href="index.html">Red</a></li>
					<li><a href="index.html">Yellow</a></li>
					<li><a href="index.html">Violet</a></li>
				</ul>
			</li>
			<li>
				<h3>Vehicles</h3>
				<p>Everything from cars to planes.</p>
				
				<ul>
					<li>Cars
						<ul>
							<li><a href="index.html">Acura</a></li>
							<li><a href="index.html">Audi</a></li>
							<li><a href="index.html">BMW</a></li>
							<li><a href="index.html">Cadillac</a></li>
							<li><a href="index.html">Chrysler</a></li>
							<li><a href="index.html">Dodge</a></li>
							<li><a href="index.html">Ferrari</a></li>
							<li><a href="index.html">Ford</a></li>
							<li><a href="index.html">GMC</a></li>
							<li><a href="index.html">Honda</a></li>
							<li><a href="index.html">Hyundai</a></li>
							<li><a href="index.html">Infiniti</a></li>
							<li><a href="index.html">Jeep</a></li>
							<li><a href="index.html">Kia</a></li>
							<li><a href="index.html">Lexus</a></li>
							<li><a href="index.html">Mini</a></li>
							<li><a href="index.html">Nissan</a></li>
							<li><a href="index.html">Porsche</a></li>
							<li><a href="index.html">Subaru</a></li>
							<li><a href="index.html">Toyota</a></li>
							<li><a href="index.html">Volkswagon</a></li>
							<li><a href="index.html">Volvo</a></li>
						</ul>
					</li>
					<li>Planes
						<ul>
							<li><a href="index.html">Boeing</a></li>
							<li><a href="index.html">Cessna</a></li>
							<li><a href="index.html">Derringer</a></li>
							<li><a href="index.html">Embraer</a></li>
							<li><a href="index.html">Gulfstream</a></li>
							<li><a href="index.html">Piper Aircraft</a></li>
							<li><a href="index.html">Raytheon</a></li>
						</ul>
					</li>
					<li>Construction
						<ul>
							<li><a href="index.html">Caterpillar</a></li>
							<li><a href="index.html">Ford</a></li>
							<li><a href="index.html">John Deere</a></li>

						</ul>
					</li>				
				</ul>
			</li>
		</ul>

전체소스
결과 : http://jquerymobile.com/demos/1.1.0/docs/lists/lists-nested.html

Inset list

일반적인 리스트를 화면의 폭을 가득 채우는 형태지만, 리스트를 박싱해서 정보들 간의 그룹핑을 시각적으로 표현해야 하는 경우에 사용한다. data-inset 속성의 값으로 true를 지정한다.

<ul data-role="listview" data-inset="true">
	<li><a href="index.html">Acura</a></li>
	<li><a href="index.html">Audi</a></li>
	<li><a href="index.html">BMW</a></li>
	<li><a href="index.html">Cadillac</a></li>
	<li><a href="index.html">Ferrari</a></li>
</ul>

전체소스
결과 : http://jquerymobile.com/demos/1.1.0/docs/lists/lists-inset.html