List View
The list view component is used to display, for example, navigation data, results, and data entries, in a list format.
Note |
---|
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
Default Selectors
By default, all <ol>
and <ul>
elements with the class="ui-listview"
and 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>
HTML Examples
-
To create a list items without an anchor, use class=
"ui-li-static"
:<ul class="ui-listview"> <li class="ui-li-static">list item1</li> <li class="ui-li-static">list item2</li> <li class="ui-li-static">list item3</li> <li class="ui-li-static">list item4</li> </ul>
-
To create a list items with an anchor, use class=
"ui-li-anchor"
:<ul class="ui-listview"> <li class="ui-li-anchor"><a href="page1.html">Page1</a></li> <li class="ui-li-anchor"><a href="page2.html">Page2</a></li> <li class="ui-li-anchor"><a href="page3.html">Page3</a></li> <li class="ui-li-anchor"><a href="page4.html">Page4</a></li> </ul>
Group Index in Listview
To add Group Index (it was ListDivider in tizen2.3 TAU), just add a class="ui-group-index"
.
<ul class="ui-listview"> <li class="ui-group-index">group 1</li> <li class="ui-li-static">list item1</li> <li class="ui-li-static">list item2</li> <li class="ui-group-index">group 2</li> <li class="ui-li-static">list item1</li> <li class="ui-li-static">list item2</li> </ul>