jQuery Mobile 是一款基于 HTML5 的移動 Web 應用開發框架,集成了眾多 UI 組件,其中圖片列表是其中一個強大的組件。
圖片列表可以展示一系列的圖片,同時支持縮略圖和全屏查看。下面是圖片列表的一個簡單示例:
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="img/girl.jpg">
<h2>Beautiful Girl</h2>
<p>This is a beautiful girl...</p>
</a>
</li>
<li>
<a href="#">
<img src="img/landscape.jpg">
<h2>Amazing Landscape</h2>
<p>This is an amazing landscape...</p>
</a>
</li>
<li>
<a href="#">
<img src="img/animal.jpg">
<h2>Cute Animal</h2>
<p>This is a cute animal...</p>
</a>
</li>
</ul>
以上代碼中,我們使用了<ul>
和<li>
標簽來創建一個圖片列表,并且給<ul>
標簽添加了data-role="listview"
和data-inset="true"
屬性來告訴 jQuery Mobile 這是一個列表,并且需要使用內嵌樣式。
在每個<li>
中,我們使用了<a>
標簽來包含圖片、標題和描述,并且給<img>
標簽設置了一個圖片鏈接。
通過這種方式,我們可以輕松地創建一個漂亮的圖片列表,并且支持在全屏模式下查看圖片。