----- IT -----/jQuery Moblie
jQuery Mobile - Thumbnails & Icons(썸네일과 아이콘 리스트)
대소니
2011. 6. 30. 14:29
리스트 항목 왼쪽에 thumbnail을 추가하기 위해, 리스트 내부에 첫번째 child 요소로 이미지를 추가하면 됩니다. 그러면 프레임웍크는 80 픽섹의 square로 이미지를 변형합니다. 표준 16x16 픽셀 아이콘을 사용하기 위해서는 이미지 요소에 ui-li-icon의 class를 추가하면 됩니다.
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-p.jpg" />
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ok.jpg" />
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ws.jpg" />
<h3>Elephant</h3>
<p>The White Stripes</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-rh.jpg" />
<h3>Kid A</h3>
<p>Radiohead</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-xx.jpg" />
<h3>XX</h3>
<p>XX</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-mg.jpg" />
<h3>Congratulations</h3>
<p>MGMT</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ag.jpg" />
<h3>Ashes Grammar</h3>
<p>A Sunny Day in Glasgow</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-k.jpg" />
<h3>Hot Fuss</h3>
<p>Killers</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-af.jpg" />
<h3>The Suburbs</h3>
<p>Arcade Fire</p>
</a></li>
</ul>
</div><!--/content-primary -->
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-p.jpg" />
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ok.jpg" />
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ws.jpg" />
<h3>Elephant</h3>
<p>The White Stripes</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-rh.jpg" />
<h3>Kid A</h3>
<p>Radiohead</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-xx.jpg" />
<h3>XX</h3>
<p>XX</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-mg.jpg" />
<h3>Congratulations</h3>
<p>MGMT</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-ag.jpg" />
<h3>Ashes Grammar</h3>
<p>A Sunny Day in Glasgow</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-k.jpg" />
<h3>Hot Fuss</h3>
<p>Killers</p>
</a></li>
<li><a href="index.html">
<img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/album-af.jpg" />
<h3>The Suburbs</h3>
<p>Arcade Fire</p>
</a></li>
</ul>
</div><!--/content-primary -->
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
<li><a href="index.html"><img src="http://jquerymobile.com/demos/1.0b1/docs/lists/images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->