The list view component is used to display, for example, navigation data, results, and data entries, in a list format.
Note |
---|
|
By default, all <ol>
and <ul>
elements with the data-role="listview"
attribute are displayed as list views.
To manually create a list view component, use the component constructor from the tau
namespace:
<ul id="list"> <li>Anton</li> <li>Arabella</li> <li>Barry</li> <li>Bill</li> </ul> <script> tau.widget.Listview(document.getElementById("list")); </script>
If the jQuery library is loaded, you can use its method:
<ul id="list"> <li>Anton</li> <li>Arabella</li> <li>Barry</li> <li>Bill</li> </ul> <script> $('#list').listview(); </script>
To create a basic 1-line list item with or without an anchor:
<!--With an anchor--> <ul data-role="listview"> <li><a href="#">Anton</a></li> <li><a href="#">Barry</a></li> <li><a href="#">Bill</a></li> </ul> <!--Without an anchor--> <ul data-role="listview"> <li>Anton</li> <li>Barry</li> <li>Bill</li> </ul>
To create a 1-line list item with a subtext.
If the class="ui-li-multiline"
attribute is not used, the subtext is placed next to the main text. With the attribute, the subtext is placed below the main text.
<!--Subtext next to the main text--> <ul data-role="listview"> <li><a href="#"> Anton <span class="ui-li-text-sub">subtext</span> </a> </li> <li><a href="#"> Barry <span class="ui-li-text-sub">subtext</span> </a> </li> </ul> <!--Subtext below the main text--> <ul data-role="listview"> <li class="ui-li-multiline">Anton <span class="ui-li-text-sub">subtext</span> </li> <li class="ui-li-multiline">Barry <span class="ui-li-text-sub">subtext</span> </li> </ul>
To create a 1-line list item with a text button or a circle-shaped button:
<ul data-role="listview"> <li> <a href="#"> Anton <div data-role="button" data-inline="true">Button</div> </a> </li> <li> <a href="#"> Barry <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div> </a> </li> </ul>
To create a 1-line list item with a thumbnail:
<ul data-role="listview"> <!--Thumbnail--> <li> <a href="#"> <img src="thumbnail.jpg" class="ui-li-bigicon" /> Anton </a> </li> <!--Thumbnail on the right side--> <li class="ui-li-thumbnail-right"> <img src="a.jpg" class="ui-li-bigicon" /> Barry </li> </ul>
To create a 1-line list item with a checkbox:
<ul data-role="listview"> <li class="ui-li-has-checkbox"> <a href="#"><input type="checkbox" name="c1line-check1" />Anton</a> </li> </ul>
To create a basic 2-line list item:
<ul data-role="listview"> <li class="ui-li-has-multiline"> <a href="#"> Anton <span class="ui-li-text-sub">subtext</span> </a> </li> <li class="ui-li-has-multiline"> <a href="#"> Barry <span class="ui-li-text-sub">subtext</span> </a> </li> </ul>
To create a 2-line list item with a color bar:
<ul data-role="listview"> <!--Color bar, subtext, three star-shaped icons, and text button--> <li class="ui-li-has-multiline"> <a href="#"> <span class="ui-li-color-bar" style="background-color: red;"></span> Anton <span class="ui-li-text-sub">subtext <img src="00_winset_icon_favorite_on.png" /> <img src="00_winset_icon_favorite_on.png" /> <img src="00_winset_icon_favorite_on.png" /> </span> <div data-role="button" data-inline="true">button</div> </a> </li>
The following table lists the options for the list view component.
Option | Input type | Default value | Description |
---|---|---|---|
data-inset | boolean | false | Sets whether the list view is wrapped by an additional layer. |
The following table lists the events related to list view component.
Event | Description |
---|---|
beforerefreshitems | Triggered before the list view items are refreshed. |
Method | Description |
---|---|
addItem (HTMLElement listItem, number position) |
Adds an item to and refreshes the list view. |
refresh ( ) |
Refreshes the list view. |
removeItem (number position) |
Removes an item from and refreshes the list view. |
addItem
Adds an item to and refreshes the list view.
addItem (HTMLElement listItem, number position)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
listItem | HTMLElement | Required | New <li> element. |
|
position | number | Required | Position in the list. |
Return value:
No return valueCode example:
<ul id="listvi" data-role="listview"> <li><a href="#">Normal lists</a></li> <li><a href="#">Normal lists</a></li> </ul> <script> var element = document.getElementById("listvi"), listv = tau.widget.Listview(element); listv.addItem("<li>Test<div data-role='button' data-inline='true'>TEST</div></li>", 2); </script>
refresh
Refreshes the list view.
refresh ( )
Return value:
No return valueCode example:
<ul id="listvi" data-role="listview"> <li><a href="#">Normal lists</a></li> <li><a href="#">Normal lists</a></li> </ul> <script> var element = document.getElementById("listvi"), listv = tau.widget.Listview(element); listv.refresh(); </script>
removeItem
Removes an item from and refreshes the list view.
removeItem (number position)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
position | number | Required | Position in the list. |
Return value:
No return valueCode example:
<ul id="listvi" data-role="listview"> <li><a href="#">Normal lists</a></li> <li><a href="#">Normal lists</a></li> </ul> <script> var element = document.getElementById("listvi"), listv = tau.widget.Listview(element); listv.removeItem(0); </script>