List view란?
여러개의 항목을 열거할 때 사용한다. jQuery Mobile은 다양한 리스트 형식을 지원하고 있다. 리스트 형식은 ul이나 ol 엘리먼트를 이용한다. 이 엘리먼트에 대한 자세한 설명은 생활코딩의 HTML 수업 리스트 편을 참고한다. http://opentutorials.org/course/11/67
List view의 종류
기본
ul 엘리먼트를 이용하면 자동으로 list view를 만들어준다. ul 엘리먼트를 ol엘리먼트로 바꿔주면 리스트에 숫자가 붙는 numbered lists가 만들어진다.
1 2 3 4 5 | <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은 이를 별도의 페이지도 자동으로 재구성한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <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를 지정한다.
1 2 3 4 5 6 7 | <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
