ListView
@@adsenseExplorer style
Video
Documents
Downloads
Images
Music
<div class="listview">
<div class="list">
<img src="..." class="list-icon">
<span class="list-title">...list title...</span>
</div>
...
<div class="list">
<span class="list-icon icon-font-icon"></span>
<span class="list-title">...list title...</span>
</div>
</div>
<div class="listview list-type-icons">
<div class="listview list-type-tiles">
<div class="listview list-type-listing">
ListView with groups
My Resources
Video
Documents
Downloads
Images
Music
Video
Documents
Downloads
Images
Music
My Computer
Local Drive (C:)
Local Drive (D:)
Removable Drive (E:)
BD-ROM (J:)
Local Drive (C:)
Local Drive (D:)
Removable Drive (E:)
BD-ROM (J:)
disk not found
<div class="listview" data-role="listview">
<div class="list-group">
<span class="list-group-toggle">..list group title...</span>
<div class="list-group-content">
<div class="list">...</div>
...
<div class="list">...</div>
</div>
</div>
...
<div class="list-group">
<span class="list-group-toggle">..list group title...</span>
<div class="list-group-content">
<div class="list">...</div>
...
<div class="list">...</div>
</div>
</div>
</div>
Outlook style
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
Today
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
subscribe@metroui.net
MetroUI: News on 26/10/2013
Hello friend! Newest for Metro UI CSS
Simple listview
<div class="listview-outlook" data-role="listview">
<div class="list">
<div class="list-content">
<span class="list-title">...list title...</span>
<span class="list-subtitle">...list subtitle...</span>
<span class="list-remark">...list remark...</span>
</div>
</div>
...
<div class="list">
<div class="list-content">
<span class="list-title">...list title...</span>
<span class="list-subtitle">...list subtitle...</span>
<span class="list-remark">...list remark...</span>
</div>
</div>
</div>
Listview with groups
<div class="listview-outlook" data-role="listview">
<div class="list-group">
<span class="list-group-toggle">...list group title...</span>
<div class="list-group-content">
<div class="list">...</div>
...
<div class="list">...</div>
</div>
</div>
</div>
Events
| Event | Data-* | Params | Description |
| onActivate | data-on-activate | (list) | The event fired when the list activated |
| onExpand | data-on-expand | (group) | The event fired when the group expanded |
| onCollapse | data-on-collapse | (group) | The event fired when the group collapsed |