List View

The list view component is used to display, for example, navigation data, results, and data entries, in a list format.

Note
  • A button component placed inside an <a> element is not supported in the list view component. The button component must be placed inside a <div> element.
  • If you implement the list view component differently from what is described in the following examples, you must customize the element positioning for your application.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Events
  6. Methods

Default Selectors

By default, all <ol> and <ul> elements with the data-role="listview" attribute are displayed as list views.

Manual Constructor

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>

HTML Examples

Options

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.

Events

The following table lists the events related to list view component.

Event Description
beforerefreshitems

Triggered before the list view items are refreshed.

Methods

Summary

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 value

Code 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 value

Code 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 value

Code 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>