metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
522 lines (484 loc) • 33.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="The ListView control provides the infrastructure to display a set of data items in different layouts or views.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>ListView - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
.node > .data {
width: 240px;
}
.node-data.item-data-date {
width: 120px;
}
.node-data.item-data-name {
width: 200px;
}
</style>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">ListView</a></li>
<li class="toc-entry"><a href="#_listview_about">About</a></li>
<li class="toc-entry"><a href="#_listview_node">Add item</a></li>
<li class="toc-entry"><a href="#_listview_view">View types</a></li>
<li class="toc-entry"><a href="#_listview_grouping">Grouping</a></li>
<li class="toc-entry"><a href="#_listview_selectable">Selectable</a></li>
<li class="toc-entry"><a href="#_listview_events">Events</a></li>
<li class="toc-entry"><a href="#_listview_methods">Methods</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>ListView</h1>
<p class="text-leader">
The ListView control provides the infrastructure to display a set of data items in different layouts or views.
</p>
<!-- ads-html -->
<h3 id="_listview_about">About</h3>
<p>
To creating <code>listview</code> we use <code><ul></code> element with role <code>data-role="listview"</code>.
The items are defined with <code><li></code> element.
A list can have multiple views: <code>list</code>, <code>content</code>, <code>icons</code>, <code>icons-small</code>, <code>icons-large</code> and <code>tiles</code>.
</p>
<div class="example">
<ul data-role="listview" data-view="list" data-select-node="true">
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini"></li>
<li data-icon="images/setup.png" data-caption="setup.exe"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat"></li>
</ul>
</div>
<pre><code class="html">
<ul data-role="listview">
...
</ul>
</code></pre>
<h3 id="_listview_node">Add item</h3>
<p>
Each listview <code>item</code> are defined with <code><li></code> element and special attributes for it: <code>data-icon</code>, <code>data-caption</code>.
</p>
<pre><code class="html">
<li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini"></li>
<li data-icon="images/setup.png" data-caption="setup.exe"></li>
</code></pre>
<p>
To create <code>icon</code> you can define <code>tag</code> (for font icons) or path to image for <code><img></code>.
</p>
<h3 id="_listview_view">View types</h3>
<p>
A <code>listview</code> can have multiple views. To set view type use attribute <code>data-view="..."</code> with values:
<code>list</code> (default),
<code>content</code>,
<code>tiles</code>,
<code>icons</code>,
<code>icons-medium</code> or
<code>icons-large</code>. You can change this attribute at runtime to change listview view.
</p>
<div class="example">
<div class="p-4 bg-light d-flex flex-justify-between">
<input type="radio" name="r1" value="list" data-role="radio" data-caption="List" title="">
<input type="radio" name="r1" value="table" data-role="radio" data-caption="Table" checked="checked" title="">
<input type="radio" name="r1" value="content" data-role="radio" data-caption="Content" title="">
<input type="radio" name="r1" value="tiles" data-role="radio" data-caption="Tiles" title="">
<input type="radio" name="r1" value="icons" data-role="radio" data-caption="Icons" title="">
<input type="radio" name="r1" value="icons-medium" data-role="radio" data-caption="Medium icons" title="">
<input type="radio" name="r1" value="icons-large" data-role="radio" data-caption="Large icons" title="">
</div>
<div class="border bd-light p-4">
<ul data-role="listview" data-view="table" id="listview-1" data-select-node="true" data-structure='{"date": true, "name": true}'>
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video" data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>" data-date="12/21/2017" data-name="Video library"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images" data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>" data-date="12/21/2017" data-name="My images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents" data-content="<div class='mt-1' data-role='progress' data-value='24' data-small='true'>" data-date="12/21/2017" data-name="My documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads" data-content="<div class='mt-1' data-role='progress' data-value='85' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop" data-content="<div class='mt-1' data-role='progress' data-value='10' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini" data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
<li data-icon="images/setup.png" data-caption="setup.exe" data-content="<span class='text-muted'>Executable</span>"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat" data-content="<span class='text-muted'>Data file</span>"></li>
</ul>
</div>
</div>
<pre><code class="html">
<ul data-role="listview" data-view="tiles">
...
<ul>
</code></pre>
<h4 id="_listview_view_content">View as content</h4>
<p>
For <code>content</code> view, you can define additional data with attribute <code>data-content="..."</code>.
Value for this attribute must be simple string or valid html. Also supports Metro 4 components definition.
</p>
<div class="example">
<ul data-role="listview" data-view="content" data-select-node="true">
<li data-icon="<span class='mif-folder fg-orange'>"
data-caption="Video"
data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>"></li>
<li data-icon="<span class='mif-folder fg-cyan'>"
data-caption="Images"
data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="desktop.ini"
data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
<li data-icon="images/setup.png"
data-caption="setup.exe"
data-content="<span class='text-muted'>Executable</span>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="file1.dat"
data-content="<span class='text-muted'>Data file</span>"></li>
</ul>
</div>
<pre><code class="html">
<ul data-role="listview" data-view="content" data-select-node="true">
<li data-icon="<span class='mif-folder fg-orange'>"
data-caption="Video"
data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>"></li>
<li data-icon="<span class='mif-folder fg-cyan'>"
data-caption="Images"
data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="desktop.ini"
data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
<li data-icon="images/setup.png"
data-caption="setup.exe"
data-content="<span class='text-muted'>Executable</span>"></li>
<li data-icon="<span class='mif-file-empty'>"
data-caption="file1.dat"
data-content="<span class='text-muted'>Data file</span>"></li>
</ul>
</code></pre>
<h4 id="_listview_view_table">View as table</h4>
<p>
For <code>table</code> view, you must define additional structure for items with attribute <code>data-structure="{...}"</code>.
Value for this attribute must be valid json object stored as string.
This structure define additional columns. Each item in structure writes as key/value, where key is a name for additional field and value can be true or false.
True - field displayed, false - filed not displayed.
Now for each listview item you can set additional fields with data attribute <code>data-key_name="..."</code> where key is a key from structure data.
</p>
<div class="example">
<ul data-role="listview" data-view="table" data-select-node="true" data-structure='{"date": true, "name": true}'>
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video" data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>" data-date="12/21/2017" data-name="Video library"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images" data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>" data-date="12/21/2017" data-name="My images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents" data-content="<div class='mt-1' data-role='progress' data-value='24' data-small='true'>" data-date="12/21/2017" data-name="My documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads" data-content="<div class='mt-1' data-role='progress' data-value='85' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop" data-content="<div class='mt-1' data-role='progress' data-value='10' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini" data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
<li data-icon="images/setup.png" data-caption="setup.exe" data-content="<span class='text-muted'>Executable</span>"></li>
<li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat" data-content="<span class='text-muted'>Data file</span>"></li>
</ul>
</div>
<pre><code class="html">
<ul data-role="listview"
data-view="table"
data-select-node="true"
data-structure='{"date": true, "name": true}'>
<li data-icon="<span class='mif-folder fg-orange'>"
data-caption="Video"
data-date="12/21/2017"
data-name="Video library"></li>
<li data-icon="<span class='mif-folder fg-cyan'>"
data-caption="Images"
data-date="12/21/2017"
data-name="My images"></li>
</ul>
</code></pre>
<p class="remark">
You can set styles for additional items. Each additional item stored in element with classes <code>.node-data</code> + <code>.item-data-key_name</code>.
</p>
<!-- ads-html -->
<h3 id="_listview_grouping">Grouping</h3>
<p>
Component <code>listview</code> is supports a <strong>one level grouping</strong> of items.
To create <code>grouping</code> you must place list of items to second level. It's all.
</p>
<div class="example">
<div class="p-4 bg-light d-flex flex-justify-between">
<input type="radio" name="r2" value="list" data-role="radio" data-caption="List" title="">
<input type="radio" name="r2" value="content" data-role="radio" data-caption="Content" title="">
<input type="radio" name="r2" value="tiles" data-role="radio" data-caption="Tiles" title="">
<input type="radio" name="r2" value="icons" data-role="radio" data-caption="Icons" title="">
<input type="radio" name="r2" value="icons-medium" data-role="radio" data-caption="Medium icons" checked title="">
<input type="radio" name="r2" value="icons-large" data-role="radio" data-caption="Large icons" title="">
</div>
<div class="border bd-light p-4">
<ul data-role="listview" id="listview-2" data-view="icons-medium" data-select-node="true">
<li data-caption="Folders">
<ul>
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
</ul>
</li>
<li data-caption="Devices and disks">
<ul>
<li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
<li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
<li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
<li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
<li data-icon="images/disk-network.png" data-caption="Network"></li>
</ul>
</li>
</ul>
</div>
</div>
<pre><code class="html">
<ul data-role="listview" data-view="icons-medium">
<li data-caption="Folders">
<ul>
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
</ul>
</li>
<li data-caption="Devices and disks">
<ul>
<li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
<li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
<li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
<li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
<li data-icon="images/disk-network.png" data-caption="Network"></li>
</ul>
</li>
</ul>
</code></pre>
<p>
If you need to create collapsing node, add attribute <code>data-collapsed="true"</code> to item definition.
</p>
<h3 id="_listview_selectable">Selectable</h3>
<p>
Attribute <code>data-selectable</code> enable or disable <code>selectable</code> mode for <code>listview</code>.
You can change this attribute at runtime.
Each checkbox linked with listview item on data attribute <code>node</code>.
</p>
<div class="example">
<div class="p-4 bg-light d-flex flex-justify-between">
<input data-role="switch" data-caption="Enable selectable" title="" onclick="var lv = $('#listview-3'); $(this).is(':checked') ? lv.attr('data-selectable', true) : lv.attr('data-selectable', false)">
<input name="r3" value="list" data-role="radio" data-caption="List" checked title="">
<input name="r3" value="content" data-role="radio" data-caption="Content" title="">
<input name="r3" value="tiles" data-role="radio" data-caption="Tiles" title="">
<input name="r3" value="icons" data-role="radio" data-caption="Icons" title="">
<input name="r3" value="icons-medium" data-role="radio" data-caption="Medium icons" title="">
<input name="r3" value="icons-large" data-role="radio" data-caption="Large icons" title="">
</div>
<div class="border bd-light p-4">
<ul data-role="listview" id="listview-3" data-view="list" data-select-node="true" data-selectable="false" data-select-current="false">
<li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
<li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
<li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
<li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
<li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
<li data-caption="Devices and disks">
<ul>
<li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
<li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
<li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
<li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
<li data-icon="images/disk-network.png" data-caption="Network"></li>
</ul>
</li>
</ul>
</div>
</div>
<pre><code class="html">
<ul data-role="listview" data-selectable="true">
...
</ul>
</code></pre>
<h3 id="_listview_events">Events</h3>
<p>
When <code>listview</code> works, it generated the numbers of events. You can use callback for this events to behavior with <code>listview</code>.
</p>
<table class="table cell-border table-border options-table">
<thead>
<tr>
<th>Event</th>
<th>Data-*</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>onNodeClick(node, listview)</td>
<td><code>data-on-node-click</code></td>
<td>Fired when user click on node caption</td>
</tr>
<tr>
<td>onNodeDblClick(node, listview)</td>
<td><code>data-on-node-dblclick</code></td>
<td>Fired when user dblclick on node caption</td>
</tr>
<tr>
<td>onNodeInsert(node, listview)</td>
<td><code>data-on-node-insert</code></td>
<td>Fired when node was inserted</td>
</tr>
<tr>
<td>onNodeDelete(node, listview)</td>
<td><code>data-on-node-delete</code></td>
<td>Fired when node was deleted</td>
</tr>
<tr>
<td>onNodeClean(node, listview)</td>
<td><code>data-on-node-clean</code></td>
<td>Fired when node was cleaned</td>
</tr>
<tr>
<td>onGroupNodeClick(state, check, node, listview)</td>
<td><code>data-on-radio-click</code></td>
<td>Fired when user click on radio input</td>
</tr>
<tr>
<td>onExpandNode(node, listview)</td>
<td><code>data-on-expand-node</code></td>
<td>Fired when node was expanded</td>
</tr>
<tr>
<td>onCollapseNode(node, listview)</td>
<td><code>data-on-collapse-node</code></td>
<td>Fired when node was collapsed</td>
</tr>
<tr>
<td>onListviewCreate(listview)</td>
<td><code>data-on-listview-create</code></td>
<td>Fired when node was created</td>
</tr>
</tbody>
</table>
<h3 id="_listview_methods">Methods</h3>
<p>
You can use <code>listview</code> methods to interact with the component at runtime.
</p>
<ul>
<li><strong>toggleNode(node)</strong> - toggle node state</li>
<li><strong>add(parent, data)</strong> - add node</li>
<li><strong>addGroup(data)</strong> - add group</li>
<li><strong>insertBefore(node, data)</strong> - add new node before specified node</li>
<li><strong>insertAfter(node, data)</strong> - add new node after specified node</li>
<li><strong>del(node)</strong> - delete node from tree</li>
<li><strong>clean(node)</strong> - clean node</li>
<li><strong>getSelected()</strong> - get selected nodes</li>
</ul>
<div class="example">
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').addGroup({
caption: 'Group'
})
">Add group</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').add(null, {
caption: 'New node',
icon: '<span class=\'mif-air\'>'
})
">Add node</button>
<button class="button" onclick="
var lv = $('#lv_1');
var t = lv.find('.current-group').length > 0 ? lv.find('.current-group') : $(lv.find('.node-group')[0]);
lv.data('listview').add(t, {
caption: 'Sub item',
icon: '<span class=\'mif-folder\'>'
})
">Add SubItem</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').insertBefore(lv.find('.current'), {
caption: 'Before node',
icon: '<span class=\'mif-folder\'>'
})
">Insert before</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').insertAfter(lv.find('.current'), {
caption: 'After node',
icon: '<span class=\'mif-folder\'>'
})
">Insert after</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').del(lv.find('.current'))
">Delete item</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').del(lv.find('.current-group'))
">Delete group</button>
<button class="button" onclick="
var lv = $('#lv_1');
lv.data('listview').clean(lv.find('.current-group'))
">Clean</button>
<hr>
<ul data-role="listview" id="lv_1" data-select-node="true" data-view="icons-medium"></ul>
</div>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<script>
$("input[name=r1]").on("click", function(){
var checked = $(this).is(":checked");
if (checked) {
$("#listview-1").data("listview").view(this.value);
}
});
$("input[name=r2]").on("click", function(){
var checked = $(this).is(":checked");
if (checked) {
$("#listview-2").data("listview").view(this.value);
}
});
$("input[name=r3]").on("click", function(){
var checked = $(this).is(":checked");
if (checked) {
$("#listview-3").data("listview").view(this.value);
}
});
</script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>